Templates Launch
Introducing the Templates section — premium, production-ready website templates. Kicking off with our flagship SaaS bundle, free for a limited time.
- Worksuite SaaS HTML Template Bundle — 12 theme variants, 20+ pages for SaaS, project management, HR, CRM, and AI startups (normally $99, free)
- Templates listing page — sidebar navigation, scroll-on-hover full-page previews via CSS container queries
Scroll-Driven Cinema
Cinematic scroll effects that make pages feel alive. Every component driven by scroll position, not time.
- Text Reveal — words slide up from behind a mask on scroll, word-by-word stagger
- Stacked Cards — scroll-driven deck that stacks then fans out as you pass
- Starfield Background — parallax star field flying toward viewer, reacts to mouse
- Scroll Progress Bar — reading progress indicator fixed at top of viewport
- Scroll Timeline — pinned narrative with progressive reveal on scroll
- Zoom Scroll — content zooms from far to close as you scroll
- Parallax Layers — multi-depth scroll effect with independent layer speeds
Kinetic Text & Motion
Expressive typography and motion primitives for marketing-grade pages.
- Kinetic Headline — oversized editorial headline with staggered entrance
- Infinite Marquee — seamless auto-scrolling strip with pause-on-hover
- Confetti Burst — physics-driven particle explosion on trigger
- Sparkline Chart — animated inline mini-chart with draw-in stroke
Surfaces & Interaction
Backgrounds, borders, and tab patterns with a tactile, physical feel.
- Aurora Border — animated gradient border that flows around the edge
- Morphing Blob — SVG blob that fluidly morphs between organic shapes
- Gravity Tabs — tab indicator with spring-physics follow on switch
- Shimmer Skeleton — loading placeholder with diagonal shimmer sweep
Interactive Effects
Four new components focused on cursor interactions and visual feedback.
- Command Palette — searchable command menu with keyboard navigation
- OTP Input — auto-advancing digit input with paste support
- Notification Toast — stacked toast system with auto-dismiss
- Glitch Text — cyberpunk-style text distortion effect
Cursor & Physics
New components exploring cursor tracking, physics simulations, and scroll-driven effects.
- Cursor Trail — smooth particle trail following mouse movement
- Magnetic Button — spring-physics cursor attraction effect
- Hold to Confirm — radial progress confirmation on long press
- Text Highlight on Scroll — karaoke-style word highlighting
Layouts & Inputs
Layout components and interactive input patterns for building app UIs.
- Bento Grid — responsive masonry-style grid layout
- Dock Menu — macOS-style magnifying dock navigation
- Drag Reorder List — sortable list with drag handles
- Before/After Slider — image comparison with draggable divider
Backgrounds & Data Viz
Immersive background effects and data visualization components.
- Particles Background — configurable canvas particle system
- Gradient Mesh Background — animated multi-point gradient
- Grid Dot Background — subtle dotted grid pattern
- Circular Progress Ring — animated SVG progress with gradient stroke
Text & Buttons
New text animation effects and creative button variants.
- Typewriter Text — character-by-character typing animation
- Scramble Text — random character shuffle reveal
- Split-Flap Display — airport departure board style text
- Moving Border Button — animated border with gradient trail
More Components
Expanding the initial launch with more buttons, cards, and effects.
- Liquid Button — fluid morphing button animation
- Liquid Glass Button — glassmorphism with liquid distortion
- Liquid Metal Button — chrome metallic reflection effect
- Icon Slide Button — icon slides in on hover
- Tilt Card — perspective tilt following cursor position
Initial Launch
Froiden UI is live with 5 components across text effects, animations, backgrounds, buttons, and cards. Plus 37 Tailwind UI Kit items.
- Sparkles Text — animated sparkle effects around text
- Gradient Button — animated gradient with hover glow
- Aurora Background — mesmerizing gradient animation
- 3D Hover Card — interactive tilt on mouse movement
- Animated Counter — smooth number counting animation
- 37 Tailwind UI Kit components — accordion through tooltip
