E.17
viewportcontinuouszero deps
Aurora Field
A fluid colour atmosphere of drifting, blurred light that fills its container.
Backgrounds & Effects · React / CSS / Tailwind
Landing Page Magic
Atmosphere, rhythm and a reason to scroll.
A landing page has a few seconds to set a mood and a few scrolls to make a case. This set gives you an atmosphere that stays out of the way, social proof that keeps moving, feature layouts that respond to attention, and copy that reveals itself at reading pace.
- C.12hoverfocuscontinuouszero deps
Infinite Marquee
A seamless horizontal marquee that eases to a stop on hover and never jumps.
Typography & Text · React / CSS / Tailwind
- B.06pointerhovertweenzero deps
Spotlight Card
A card that reveals a soft radial light — inner glow and border highlight — under the pointer.
Cards & Containers · React / CSS / Tailwind
- C.11scrollscroll-linkedmotion
Gradient Reveal Text
A paragraph whose words take on an accent gradient as you scroll it into place.
Typography & Text · React / Motion / Tailwind
- B.37viewporthoverstaggermotion
Bento Grid
A responsive editorial bento layout with dense packing, a staggered entrance and pointer-lit tiles.
Cards & Containers · React / Motion / CSS / Tailwind
- C.41viewportcontinuouszero deps
Typewriter
Types, holds and deletes a rotating list of phrases behind a blinking caret.
Typography & Text · React / Tailwind
- C.44viewporthovertweenzero deps
Marker Highlight
Hand-drawn annotations — marker swipes, underlines, circles, boxes — that draw in on view.
Typography & Text · React / SVG / CSS / Tailwind
- E.48pointerviewportcontinuouszero deps
Flow Field
Particles drifting along an evolving simplex-noise vector field, leaving soft fading trails.
Backgrounds & Effects · React / Canvas / Tailwind
- A.63hoverfocuscontinuouszero deps
Border Beam Button
A button whose hairline border carries a travelling two-colour beam that brightens on hover and focus.
Buttons & Controls · React / CSS / Tailwind
- E.82viewportcontinuouszero deps
Connection Beams
Curved SVG beams between nodes with a travelling comet of light — for integration diagrams.
Backgrounds & Effects · React / SVG / Tailwind
- C.71viewportstaggerzero deps
Split-Flap Display
A Solari departure board: hinged flaps fall cell by cell until the new text is spelled out.
Typography & Text · React / CSS / Tailwind
- E.80pointerfocustweenzero deps
Flashlight Reveal
A dark layer with a soft, eased flashlight that reveals the content beneath the pointer.
Backgrounds & Effects · React / CSS / Tailwind
- B.99clickkeyboardspringmotion
Pricing Toggle
Pricing cards with a monthly / yearly switch, digit-rolling prices, savings badges and Intl currency formatting.
Cards & Containers · React / Motion / Tailwind
- C.103clickkeyboardstaggermotion
Testimonial Rotator
An editorial quote carousel: words blur in one by one, authors swap, and a pausable timer fills the active indicator.
Typography & Text · React / Motion / Tailwind
- E.110pointerviewportcontinuouszero deps
Light Rays
Soft volumetric god rays fanning from a light source, swaying slowly with drifting dust motes.
Backgrounds & Effects · React / CSS / Tailwind
- E.142pointerclickspringzero deps
Particle Text
Type sampled into a swarm of particles that spring home, scatter from the pointer and re-form.
Backgrounds & Effects · React / Canvas / Tailwind
- E.139pointerviewportzero deps
Glass Refraction
A liquid-glass pane that bends the content behind it, with a specular rim that leans toward the pointer.
Backgrounds & Effects · React / CSS / SVG / Tailwind
- D.138scrollfocusscroll-linkedmotion
Auto-Hide Header
A sticky header that slides away as you scroll down and springs back the moment you scroll up.
Navigation & Menus · React / Motion / Tailwind
- E.172pointerscrollcontinuouszero deps
Parallax Hills
Layered, seeded landscape silhouettes with atmospheric haze, slow drift and pointer/scroll parallax by depth.
Backgrounds & Effects · React / SVG / Tailwind
- C.164viewporthoverstaggerzero deps
Stroke Draw Text
Display text drawn as a self-tracing outline, letter by letter, that then fills in.
Typography & Text · React / SVG / Tailwind
- D.168hoverfocusspringmotion
Hover Highlight Nav
Nav links with one highlight pill that springs to the hovered or focused link and rests on the active one.
Navigation & Menus · React / Motion / Tailwind
- E.201viewportclickstaggerzero deps
Tile Reveal
Content revealed by a grid of tiles flipping, shrinking or dropping away in a wave — on view, on click or from a prop.
Backgrounds & Effects · React / CSS / Tailwind
- C.191hoverpointerspringmotion
Text Image Reveal
Editorial text where marked words reveal an image: an inline pill that pushes the line apart, or a floating print that follows the pointer.
Typography & Text · React / Motion / Tailwind
- E.200pointerviewportcontinuouszero deps
Fireflies
Glowing fireflies drifting on smooth noise paths, blinking on their own rhythms and gently drawn toward the pointer.
Backgrounds & Effects · React / Canvas / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactCSSTailwindMotionSVGCanvas
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Aurora Field documentation
- Infinite Marquee documentation
- Spotlight Card documentation
- Gradient Reveal Text documentation
- Bento Grid documentation
- Typewriter documentation
- Marker Highlight documentation
- Flow Field documentation
- Border Beam Button documentation
- Connection Beams documentation
- Split-Flap Display documentation
- Flashlight Reveal documentation
- Pricing Toggle documentation
- Testimonial Rotator documentation
- Light Rays documentation
- Particle Text documentation
- Glass Refraction documentation
- Auto-Hide Header documentation
- Parallax Hills documentation
- Stroke Draw Text documentation
- Hover Highlight Nav documentation
- Tile Reveal documentation
- Text Image Reveal documentation
- Fireflies documentation