Mascot Avatar
MediaA face generated from a seed — same string, same face, every time. No image files and no lookup table, so there is no "not found" case for a call site to answer.
318 lines
01 — Components
The Shelf.
Every component here runs in production on this site. Preview it, tune it, then take the source, the CLI command, or a prompt that drops it into your own project.
17 components
Sort
Showing 17 of 17 components
Process Story
EffectsThe scroll-driven studio process section — numbered phases that pin, advance, and hand off to the next as you scroll through them.
359 lines
File Card Collections
MediaStacked file cards that fan out on hover — used for the project deliverables view in the client dashboard.
103 lines
Template FX
EffectsThe scroll-driven effects layer used on the template pages — parallax, reveal, and pinned sections composed together.
138 lines
Story Scroll
EffectsFull-bleed scroll sections that declare their own background theme, so fixed chrome above them can invert as each one passes.
148 lines
Dynamic Island TOC
NavigationA floating table of contents that collapses to a pill and expands on hover, tracking the section currently in view.
464 lines
Pixel Avatar
MediaA set of hand-drawn pixel faces rendered from a grid definition. No image files — each face is data, so it scales cleanly and themes with CSS.
364 lines
Feature Carousel
MediaA stacked-card carousel where the inactive cards stay visible behind the active one, rotating on a timer or by click.
164 lines
Animated Theme Toggler
ButtonsLight/dark switch that animates the transition through the View Transitions API, with an optional click sound.
150 lines
Hover Text
TextPer-character hover response — letters lift and weight up as the cursor passes, then settle back.
22 lines
Cookie Consent
OverlaysA consent banner that defaults to declining non-essential cookies and remembers the choice — no dark patterns, no pre-ticked boxes.
217 lines
Text Rotate
TextCycles through phrases, animating each character independently. Stagger direction, split mode, and timing are all controllable.
215 lines
Interactive Hover Button
ButtonsA pill button whose label slides out as an arrow slides in. The dot expands to fill the button on hover.
175 lines
Breadcrumb
NavigationAccessible breadcrumb trail — composable parts with the current page marked via aria-current rather than styling alone.
113 lines
Button
ButtonsThe base button, plus the Liquid and Metal variants — glassy and brushed-metal treatments built on the same primitive.
388 lines
Input
InputsThe base text field — themed borders, focus ring, and disabled state wired to the design tokens.
26 lines
Label
InputsThe form label primitive — ties to its control, and dims in step with a disabled peer instead of staying at full contrast.
25 lines