Loading
Loading

Build the Interaction Layer Your Website is Missing.

Browse the EffectsBrowse the EffectsBrowse the EffectsUpgrade to ProUpgrade to ProUpgrade to Pro

40+ effects free, forever. No credit card.

© 2026 Hyperiux. All rights reserved. · Vault is built by Hyperiux · Small motion. Big signal.

Platform

Vault

  • Documentation
  • Pricing
  • NPM
  • MCP

Categories

  • All Effects
  • WebGL
  • Text
  • Backgrounds
  • Buttons
  • Carousels
  • Scroll
  • Components
  • Navigation
  • Cursor
  • Transitions
  • Loaders

Documents

  • Introduction
  • Installation
  • CLI
  • Dependencies
  • License

Legal

  • License Agreement
  • Terms of Service
  • Privacy Policy
  • Refund Policy
Socials
  • Twitter / X
  • LinkedIn
  • GitHub
  • Instagram
Contact Us
  • hello@hyperiux.com
New effects, in your inbox.

Every new drop, plus the occasional behind-the-scenes build. No spam. Unsubscribe anytime.

SubscribeSubscribe
HyperiuxHyperiux
All Effects
Free Effects52Pro Effects88Text Animations25Animated Backgrounds6Animated Buttons7Carousel Effects11Scroll Effects25Creative Components16Navigations5Cursor Effects16Transitions10Loaders3WebGL & 3D Effects17
PricingGithubNPMMCP
Loading
HyperiuxHyperiux
All Effects
Featured ComponentsText AnimationsAnimated BackgroundsAnimated ButtonsCarousel EffectsScroll EffectsCreative ComponentsNavigationsCursor EffectsTransitionsLoadersWebGL & 3D Effects
IntroductionInstallationCLIDependenciesLicense
GithubNPMMCP Doc
Home/effects/components

Creative Components

Add thoughtful interaction to cards, tabs, FAQs, forms, modals and other interface elements with effects that make everyday components feel more engaging, responsive and enjoyable to explore.

Trending

Components
Infinite Grid Gallery

Infinite Grid Gallery

Components
Animated FAQ

Animated FAQ

Components
Card Drift

Card Drift

Components
Interactive List Preview

Interactive List Preview

Components
Border Beam

Border Beam

TextBackgroundsButtonsCarouselsScrollComponentsNavigationCursorTransitionsLoadersWebGL

Layout

Information Drawer
GSAPLenis

Information Drawer

Components

Timeline
@gsap/reactGsap+1

Timeline

Components

Infinite Grid Gallery
CSS
Pro

Infinite Grid Gallery

Components

Animated FAQ
GSAPLucide React

Animated FAQ

Components

24
Draggable Marquee
GSAP
Pro

Draggable Marquee

Components

1
Card Drift
GSAPLucide React
Pro

Card Drift

Components

1
Shear Wipe
GSAP
Pro

Shear Wipe

Components

1
Hover Stack
Vanilla JS

Hover Stack

Components

15
Interactive List Preview
GSAP

Interactive List Preview

Components

15
Border Beam
CSS

Border Beam

Components

1
Video Player
Lucide React
Pro

Video Player

Components

1
Animated Form
Zod
Pro

Animated Form

Components

1
Animated Modal
Lucide React
Pro

Animated Modal

Components

1
Animated Tabs
GSAP
Pro

Animated Tabs

Components

1
Testimonial Swiper
GSAPLucide React
Pro

Testimonial Swiper

Components

1
Gooey Counter
Canvas

Gooey Counter

Components

15

Questions, Answered.

Which creative component should I add first to a SaaS landing page?

Start with Animated FAQ and Form because they directly support objection handling and lead capture. Use Tabs and Modal to organize depth, and use proof components such as Testimonial Swiper or Interactive List Preview when they make decision-making easier.

Where do creative components matter most?

Creative components work best on SaaS landing pages, pricing pages, product pages, agency service pages, lead-capture flows, proof sections, onboarding visuals, and conversion-focused sections. This category exists for revenue-adjacent interaction, not decoration.

When can a creative component damage conversion?

It damages conversion when animation delays validation, hides required content, interrupts form completion, traps users in a modal, or makes a simple decision feel theatrical. The component should clarify state or reveal support, not slow the task.

How do conversion components stay fast?

Keep state transitions short, avoid expensive re-renders during typing or validation, lazy-load media-heavy components, and never make user action wait for decoration. Input handling should stay independent from motion.

What accessibility patterns are non-negotiable?

Accordions need buttons and aria-expanded; dialogs need labels, focus trap, Escape close, and focus restore; tabs need keyboard behavior; forms need labels, validation clarity, and visible error messaging. Use semantic HTML before adding animation.

How should these components adapt to mobile layouts?

Use full-width drawers, inline sections, stacked tabs, larger touch targets, and simpler reveal patterns where desktop components become cramped. Long or form-heavy dialogs often work better as inline mobile sections.

View MoreView More

Request a Custom Creative Component

Need a custom effect? Tell us what to create.