A collection of customizable and responsive interfaces built with Open Props.
- Language Switch
Demo - Hero - view transitions
Demo - Hero - view transitions - dialog
Demo - Gradient Adaptive Ghost Button
Demo - Gradient Underlines "text-decoration" CSS
Demo - Hero section gradient.style
Demo - Hero - color-mix()
Demo - Visual balance with Relative Sizes
Demo - Adaptive Cards with 'text-wrap: balance'
Demo - Adaptive links with 'text-wrap: balance'
Demo - Menu animation with View Transition API
Demo - Theme Switch Component with Normalize
Demo - Infinite Scroll Animation
Demo - Multi-Layer Gradient Hue Interpolation + View Transitions
Demo - Keyframe Interpolation - ( Text Animation )
Demo - Adaptive Cards - oklch
Demo - Adaptive Cards - Gradient Animation - Dark
Demo - Hero Section with Variable Font Animation
Demo - Sidenav with View Transitions API
Demo - Carousel with Scroll-Driven Animations
Demo - Next Store - (Storefront with next.js) -
Demo - Image Gallery - View Transitions API & Scroll-Driven Animations
Demo - Halloween Rank Pairs - hybrid utility + props
Demo - Hero Section Sticky Slides with Scroll-driven Animations
Demo - Hero section with cyber glitch effect
Demo - Landing Page with Scroll-Driven Animations
Demo - Dynamic Content Lockups with Scroll-Driven Animations
Demo - Open Props Meets Container Queries. (Infinite Scroll Animation)
Demo - Dropdown Menu & Infinite Scroll Animation
Demo - Bento Grid (Container Queries, text-wrap: pretty)
Demo - Typography: Scaling with the Golden Ratio
Demo - Logical Carousel
Demo - Recommendation Carousel (Scroll-Driven Animations)
Demo - Services Section - Open Props V2
Demo - Marketing Hero Section - Open Props V2
Demo - Dynamic Content Lockups V2
Demo - Sticky Slider CTA Cards
Demo - Tabbed Interface - :has() + transition-behavior
Demo - Slider with Scroll Snap Events
Demo - Beat Reactor + 3D Text (paint-Order)
Demo - AI Hero Chat - Popover API Example
Demo - CSS Carousel with HDR Palettes (Astro)
Demo