Loading gallery…
50 components · vendored · lint-clean
Aceternity UI, wired for this template
Animated cards, beams, bento grids and text effects — pulled from the registry, adapted to Tailwind v4 + motion/react, and demoed live on this page.
Typewriter
effect
…
works.
01
Beams, sparkles & gradients
BackgroundBeams — hover to see the glow
SparklesCore
BackgroundGradientAnimation
Animated aurora wash behind any content
02
Pins, stacks & hover cards
CardSpotlight
Move your cursor for a spotlight.
A card that lifts on hover, with a beam behind it.
3D Pin
Hover cards
A beam that traces your scroll, guiding the eye down the page.
Tracing Beam
Scroll guide
Patterns react to your mouse while the card sits above an animated capsule.
Evervault
Encrypted hover
DirectionAwareHover
✦
Vendored, not installed
Each component ships as source in components/ui — zero registry lock-in.
❖
Tailwind v4 native
Same cn() util and zinc palette as the rest of the template.
✓
Zero-warning lint
Vendored dir has its own scoped eslint override.
MovingBorder
moving-borderThe fifty components slot straight into the template and just work.
Next.js TemplateVendored showcaseHover, scroll and type — everything below is live, not a static screenshot.
Aceternity Registryui.aceternity.comBuilt with motion/react and Tailwind v4, matching the template's own stack.
Motionmotion/react
03
Highlight, flip & encrypt
Text effects with mouse-follow highlight
Animate text like
flip-wordssparkles
1EHK6mOn4p8 x[:m[Wx):encrypted-text
hover the capsule
Beam one
The beam follows your scroll.
Beam two
It traces between sticky sections.
Beam three
Pairs perfectly with tall content.
04
Inputs with built-in motion
placeholders-and-vanish-input
05
Waves, boxes & spotlights
WavyBackground
Animated SVG waves behind content.
Boxes — grid dots pattern
Spotlight
BackgroundGradient — animated border glow
06
More text effects
Outline
Cover
underlinecoverText that generates itself, character by character.
text-hover-effect
SquigglyText wobblesquiggly-text
TextRevealCard
The card's cyan gradient sweeps in on hover.
A secret message 👀
Hover to reveal
07
Cards, meteors & buttons
Meteors
GlareCard
MagneticButton
08
Inputs, docks & modals
floating-dock
animated-modal
09
Scroll & parallax
StickyScroll
Content sticks while you scroll; titles swap.
Second block
The next item rises as the previous fades.
Third block
Great for feature lists or onboarding.
ContainerScroll
The card scales up as you scroll past.
Changelog from my journey
I've been working on Aceternity for the past 2 years. Here's a timeline of my journey.
2026 · Phase 1
2026 · Phase 1
Vendor registry components into the template.2026 · Phase 2
2026 · Phase 2
Showcase gallery + home hero upgrade.2026 · Phase 3
2026 · Phase 3
Zero-warning toolchain, green CI, auto-deploy.10
Hover cards, parallax & masking
HoverEffect
Cards lift & glow on hover.
Second card
The grid is responsive.
Third card
Click to follow the link.
FocusCards
Second
Third
Hover this for a tooltip
tooltip-cardmulti-step-loader
Hover over this masked block
Revealed!
The Ultimate
development studio
We build beautiful products with the latest technologies and frameworks. We are a team of passionate developers and designers that love to build amazing products.
Next
Vercel
Globe
Window
File
11
Tabs & gemini
Overview tab
Details tab
Settings tab
Google Gemini Effect
Scroll — the SVG paths draw as you scroll.