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