Examples

Real-world usage patterns and component demonstrations.

Showcase

Theme & Layout Showcase

Dramatic theme transformations with pure CSS layout switching. Try the extreme themes!

Effects Kitchen Sink

Every visual effect in one page: entrances, text reveals, retro, kawaii, compositing, stagger, and triggers.

Kitchen Sink

All components demonstrated in one comprehensive page.

Dashboard

Analytics dashboard with metric cards, sparklines, tabs, progress bars, and live countdown.

Navigation Demos

Responsive Nav

Desktop/mobile nav toggle with bottom tab bar

Gallery Morph

Shared element morphing between pages

List → Detail

Title and thumbnail morphing to detail view

Nav Persistence

Header and sidebar stay while content transitions

Animation Presets

Slide, scale, fade, and none presets

View Transitions

Theme Showcase

All VT components with theme switching

Cinematic Landing

Marketing page with flowing transitions

Tabs Transitions

Fade, slide, and scale tab switching

Carousel Transitions

Stacked-grid VT carousel modes

Accordion Transitions

Animated panel open/close

Component Demos

Accordion

Collapsible content panels

Carousel

Scroll carousel with controls

Combobox

Autocomplete combobox with form

Dialog

Modal dialog patterns

Command Palette

Cmd+K search and action launcher

Context Menu

Right-click menu with keyboard nav

Drawer

Slide-in panels from any edge

Dropdown

Dropdown menu patterns

Heading Links

Auto-generated heading anchors

Tabs

Tabbed interface patterns

Toast

Notification messages

Splitter

Resizable panel splitter

Tooltip

Contextual tooltips

Page Tour

Spotlight overlay guided tour

Page Tour (Active)

Action-gated tour steps

Page Tour (Button)

External button trigger

Chart

SVG chart types and data sources

Chart (Table)

Progressive table-to-SVG chart

Chart (Dynamic)

Programmatic data and config

Form Demos

Form Controls

Token-driven checkbox, radio, range, file, color, progress, and meter normalization

Form Validation

CSS-only validation, custom messages, cross-field matching, error summaries

Form Field

Basic form-field custom element

Toggle Switch

Checkbox styled as on/off toggle

Textarea Count

Character and word counting

Textarea Auto-Grow

Auto-expanding textareas

Password Strength

Strength meter and rules checklist

Conditional Fields

Show/hide fields based on values

Range Slider

Value bubble and datalist labels

File Upload

Drag-and-drop file upload zone

Form Autosave

Draft persistence to localStorage

Input Masking

Phone, credit card, date formatting

Multi-Select Tags

Tag/chip input with dropdown

Toggle Tags

Checkbox pill chips for multi-select

Number Stepper

Custom +/- buttons on number inputs

Color Input

Swatch circle with hex display

Layout Demos

Stripe Marketing Page

Hero bleed, angled sections, fluid padding, data-measure, hairline rules

Layout Attributes POC

data-layout on semantic elements

Stack

Vertical stacking layout

Stack with Cards

Card-based stack layout

Responsive Grid

Auto-fit grid patterns

Sidebar

Responsive sidebar layout

Reel

Horizontal scrolling

Density Modes

Compact and spacious spacing

Component Regions

Header/content/footer auto-placement

Media Object

Figure + content side by side

Landing Page

Named areas with data-layout-area

Three-Tier Nesting

Page + main + component identity

Subgrid Cards

Aligned card internals across a grid

Scroll Shrink Header

Scroll-driven sticky header animation

@property Radius

Smooth border-radius transitions

Canvas Surface

Elevated surface with variants, depth, and nesting

Footnotes Demos

Basic

Simple footnote references

Multiple

Multiple footnote references

Sections

Sectioned footnotes

Long-form

Footnotes in articles

Custom Labels

Custom footnote labels

Text Effect Demos

Gradient Text

CSS-only gradient coloring with presets

Shimmer

Shimmering highlight sweep effect

Glitch

Chromatic aberration glitch effect

Text Reveal

Word/line entrance animation

Blur Reveal

Blur-to-clear word/line reveal

Highlight Draw

Animated underline, box, and circle

Typewriter

Character-by-character typing

Text Scramble

Left-to-right character decode

Theme Picker Demos

Inline

Inline theme selector

Popover

Popover theme selector

Table Demos

Static Tables

CSS-only sticky headers and columns

Interactive Tables

Sorting, filtering, pagination

Responsive Tables

Card layout on mobile

i18n Demos

i18n Typography

Script-specific fonts, ruby visibility, locale quotes, RTL

Theme Extension Demos

Interactive demonstrations of theme extension features.

All Extensions

Motion, backgrounds, borders, fonts

Motion Tokens

Hover effects, easing, staggered animations

Backgrounds

Glassmorphism, gradients, textures

Rough Borders

SVG filters, sketchy border effects

Custom Fonts

Font pairings and loading patterns

Sound Effects

Web Audio API feedback sounds

Packs

Modular extension packs that add themed effects and web components.

Pack Explorer

Load and compare packs interactively

Retro / CRT

Split-flap board, audio player, text effects

Kawaii / Cute

Pastel palette, sparkle particles, bouncy motion, Cherry Bomb One font

Memphis

Bold flat colour, geometric surface patterns, hard drop shadows, zigzag borders

Color

contrast-color()

Auto black/white text on any colored surface with live color picker

Prototyping

Wireframe Mode

Fidelity levels, labels, annotations, callouts, palettes, and overlays

Prototyping Toolkit

Mock images, lorem text, and wireframe toggle in a full page prototype

Canvas Backdrop

Test the canvas backdrop system with different themes, layouts, and chrome modes.

Backdrop Tester

Interactive test harness for backdrop presets, chrome modes, backgrounds, and gap tuning

Living Themes

Time-of-day sky, seasonal tinting — scrub through a full day cycle and watch colors shift