feat(docs): add custom landing page with scroll-driven intersection demos - #778
Merged
Merged
Conversation
Replace the "land directly in the docs" experience with a dedicated marketing landing page at `/` that sells the package and demonstrates the library on the page itself. The concept is "the page observes itself": every section is instrumented with the real library, so scrolling is the demo. A live Observer HUD and hero instrument report the active section, intersectionRatio, and impression count as you scroll, all driven by real useInView/useOnInView. Sections, each showing a real use-case: - Hero with copyable install (npm/pnpm/yarn/bun) and a live instrument - Reveal band: cards animate in on scroll (useInView + triggerOnce) - Three-APIs scrollspy: sticky code panel follows the in-view API; cards are also click-to-pin, with scroll reclaiming control - Impression strip: tiles fire once via useOnInView into a live counter - Playground: reuses the existing ObserverDemo island - Closing CTA + footer Built on Blume custom pages (pages/index.astro + PageLayout). Progressive enhancement throughout: content is fully visible with no JS, for crawlers, and under prefers-reduced-motion; the hidden-until-seen state is applied only by the observer after hydration. Motion uses transform/opacity. Routing: docs/index.mdx moves to docs/overview.mdx (/overview). The Docs tab keeps path "/" with href "/overview", preserving every existing /api, /guides, /testing URL, the sidebar, and tab highlighting; only the landing takes "/". logo.text is set to "" so the default PageLayout logo no longer prints the site title beside the mark. Verified: biome clean, design detector no findings, typecheck 0 errors, production build (112 pages) with the landing and /overview prerendered; checked desktop + mobile in light and dark. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
commit: |
Scroll-reveal fix: below-the-fold sections started visible (server- rendered) and then faded out once the client:load island hydrated and marked them not-yet-in-view. Elements now start hidden before first paint and only ever animate in. - An inline head script sets `data-rio-js` on <html> when JS is present and motion is allowed; `:root[data-rio-js] .rio-reveal` does the hiding. With no JS or reduced motion the flag is absent and all content stays visible (crawlers/no-JS lose nothing). - Reveal is now class-based (`rio-reveal` + `is-visible`); the island only adds `is-visible` on enter, so motion is one-way. Fallow audit (CI) now passes: - Treat `apps/docs/pages/**/*.astro` as entry points and ignore the `blume:data` virtual module, so Blume routes are no longer reported as unused files / unlisted dependencies. - Remove the dead `export const client` from Landing (it is imported with an explicit `client:load`, so the islands-folder convention export was unused). - Extract the shared "Read the docs / GitHub" pair (removes the clone) and lift the scrollspy state into `useScrollspy`; simplify the observer `report` with `mostVisible`/`sameActive` helpers to clear the CRAP and unit-size thresholds. - Animate the telemetry bars with transform: scaleX instead of width. Verified: biome clean, fallow audit exits 0, typecheck 0 errors, build 112 pages; reveals start hidden and animate in with no fade-out. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Give the home page a bespoke 1200x630 social card that matches the landing's dark-violet instrument aesthetic — logo lockup, headline, and the live "observer" panel — instead of Blume's limited generated card. - scripts/generate-og.mjs renders the card with Takumi (the renderer Blume already bundles) driven directly, so the layout isn't bound to Blume's og config surface. Fonts come from Inter Tight / IBM Plex Mono with a graceful fallback to the built-in font when offline. Run once and commit the PNG; Vercel serves the static file and never renders Takumi at build. Regenerate with `pnpm --filter docs og`. - Wire it via PageLayout's `ogImage="/og-home.png"`, which resolves to an absolute og:image/twitter:image against the site URL Blume auto-detects on Vercel; the card ships summary_large_image. - Add takumi-js as a docs devDependency and mark the generator an entry in .fallowrc.json so the audit stays green. Also darken the primary button: the theme accent is a light violet in dark mode, so white label text was low-contrast. A dedicated `--rio-btn` violet (oklch 0.56) carries white text well in both themes. Verified: card renders 1200x630, og:image + twitter tags emit, biome clean, fallow audit exits 0, typecheck 0 errors, build 112 pages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The card was unbalanced: the logo floated alone top-left over a large void while the instrument spanned nearly the full height on the right, and the headline sat low, centred in the gap. - Group the logo lockup with the headline and subline into one left "message" column so the brand anchors the column instead of floating. - Match the instrument's height to that column (align stretch + the panel distributes its rows) so the two columns share top and bottom edges, and centre the whole band as a unit for equal top/bottom margins. - Give the viewport field purpose: a threshold line with a target chip sitting on it (echoing the page's instrument), replacing the empty box and the near-invisible progress bar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
vercel
Bot
temporarily deployed
to
Preview – react-intersection-observer-storybook
August 5, 2026 06:43
Inactive
The static "instrument screenshot" on the right didn't earn its space. Replace it with the product's actual idea: the right zone is the viewport, and an observed element (brand-gradient media card with an "in view" verdict and content lines) has crossed the viewport boundary and clips the card's right edge — an intersection, rendered. Also shrink the logo lockup a touch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
vercel
Bot
temporarily deployed
to
Preview – react-intersection-observer-storybook
August 5, 2026 07:42
Inactive
Two fixes to the intersection graphic: - The element was clipped ~72px short of the edge by the root's right padding; drop it so the element runs off the real right edge. - Replace the disconnected vertical line with a soft violet seam on the right edge itself — the viewport boundary the element intersects — with the "viewport" label naming it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
vercel
Bot
temporarily deployed
to
Preview – react-intersection-observer-storybook
August 5, 2026 07:54
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
The docs previously landed visitors straight in the documentation. This adds a dedicated custom landing page at
/that sells the package and demonstrates the library on the page itself.The concept is "the page observes itself": every section is instrumented with the real library, so scrolling is the demo. A live Observer HUD (and the hero instrument) report the active section,
intersectionRatio, and impression count as you scroll, all driven by realuseInView/useOnInView.Sections
Each demonstrates a real use-case:
useInView({ triggerOnce }))useOnInViewinto a live counterObserverDemoislandImplementation
pages/index.astrowrappingPageLayout, composingpages/_home/Landing.tsx(+primitives.tsx,home.css).prefers-reduced-motion; the hidden-until-seen state is applied only by the observer after hydration. Motion is limited totransform/opacity.docs/index.mdx→docs/overview.mdx(/overview). The Docs tab keepspath: "/"withhref: "/overview", so every existing/api,/guides,/testingURL, the sidebar, and tab highlighting are preserved; only the landing takes/.logo.text: ""so the defaultPageLayoutlogo no longer prints the site title beside the mark.Reviewer notes
PageLayoutdoes not forward thecomponents.tsLogo override to its header (unlikeRootLayout), so the landing header reproduces the docs logo behavior (theme-awarecurrentColor, docsh-8size, mobile text-only crop matchinglogo-text.svg) in landing-scoped CSS.deployment.sitein the Blume config, which is unset site-wide today (deploy-time config, unaffected by this change).Verification
blume checktypecheck: 0 errorsblume build: 112 pages, landing +/overviewprerendered🤖 Generated with Claude Code