Chrome Folio Page
A dark portfolio homepage built from four scroll movements. The masthead sets a wordmark in mixed grotesque and italic serif over a liquid-chrome WebGL sphere, shaded with noise-rotated line bands under a screen-space grain pass and steered by the pointer. Scrolling grows the chrome band to full bleed while the masthead layers lift at three rates, then a cube warps in from deep Z as the mark blurs away, and a pinned fly-through sends project cards across an oversized word. Three.js, GSAP ScrollTrigger, SplitText, and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/chrome-folio-page.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| wordmark | string | "BLAN{K} '{25}" | Masthead wordmark. Characters inside braces are set in italic serif. |
| tagline | string | Studio one-liner | Small mono line centered in the masthead. |
| subline | string | "DESIGN - {FOLIO}" | Secondary display line, same brace syntax as the wordmark. |
| standfirst | string[] | Two BLANK lines | Mono lines pinned to the bottom of the viewport. |
| worksIntro | string[] | Three BLANK lines | Mono intro above the project fly-through. |
| cubeWord / projectsWord | string | "FEEL" / "PROJECTS" | Oversized words behind the cube (italic serif) and the cards (grotesque). |
| projects | FolioProject[] | Five BLANK projects | Title, blurb, and a two-color tint that generates both the card media and a cube face. |
| embedded | boolean | true | Own the scroll container and point ScrollTrigger at it; set false to ride the window scroll. |
wordmark / sublinetextBraced runs render in italic serif, so BLAN{K} mixes both faces without markup.
projectstextTitle, blurb, and a two-color tint per project card.
threegsaplenis