Examples
Real-world usage patterns and component demonstrations.
Showcase
Theme & Layout Showcase
Dramatic theme transformations with pure CSS layout switching. Try the extreme themes!
Kitchen Sink
All components demonstrated in one comprehensive page.
Dashboard
Analytics dashboard with metric cards, sparklines, tabs, progress bars, and live countdown.
Navigation Demos
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
Form Demos
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
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
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