INTERACTION_001CSS
Premium Button Lift
Weightless 2px rise with an edge highlight on hover.
Buttons / LightView
INTERACTION
LIBRARY.
TYPE
VIBE
TECH
COMPLEXITY
PLATFORM
168 RESULTS
INTERACTION_002CSS
Shine Sweep Button
A diagonal chrome glint travels across the surface on hover.
Buttons / LightView
CARD_01
SPOTLIGHT
Move the cursor across this surface.
INTERACTION_007CSS + JS
Mouse Spotlight Card
A soft radial light follows the cursor across the surface.
Cards / LightView
TILT / 6°
INTERACTION_008CSS + JS
3D Tilt Card
Perspective tilt that responds to pointer position.
Cards / MediumView
GLASS / SURFACE
Blur 24px · edge light
BORDER BEAM
MOVE INSIDE
INTERACTION_012CSS + JS
Custom Cursor
Dot plus trailing ring with contextual labels.
Mouse / MediumView
AMBIENT LIGHT
INTERACTION_013CSS + JS
Mouse Glow
Large ambient light that trails the pointer across a section.
Mouse / MediumView
INTERACTION_014CSS + JS
Cursor Parallax
Layers drift at different depths as the pointer moves.
Mouse / LightView
INTERACTION_015CSS + JS
Scroll Reveal
Content fades and rises as it enters the viewport.
Scroll / LightView
INTERACTION_017CSS + JS
Stagger Reveal
Children enter in sequence with a fixed delay step.
Scroll / LightView
MOVEDIFFERENT.
INTERACTION_018CSS
Headline Reveal
Lines rise out of a clipped mask, one after another.
Typography / LightView
CHROME TEXT
INTERACTION_019CSS
Shimmer Text
A metallic highlight sweeps through the letterforms.
Typography / LightView
SCRAMBLE
INTERACTION_020CSS + JS
Text Scramble
Characters cycle through noise before settling.
Typography / LightView
0COPY ACTIONS
INTERACTION_021CSS + JS
Count-Up Number
Metrics animate from zero when scrolled into view.
Typography / LightView
LOVABLECURSORBOLTV0REPLITWINDSURFLOVABLECURSORBOLTV0REPLITWINDSURF
STRUCTURE / 56PX
TEXTURE / 3%
PROCESSING
INTERACTION_025CSS
Scanning Line
A thin light passes down a panel while processing.
Loading / LightView
INTERACTION_026CSS
Skeleton Loader
Shape-accurate placeholders with a moving sheen.
Loading / LightView
DISCOVEREFFECTSPROMPTS
INTERACTION_027CSS
Navigation Underline
Underline grows from the origin side on hover.
Navigation / LightView
BLUR TO FOCUS
INTERACTION_031CSS
Blur To Focus Reveal
Copy resolves from a soft blur into perfect focus as it enters view.
Text / LightView
MAKE IT
FEEL PREMIUM.
INTERACTION_032CSS
Masked Line Reveal
Each line slides up from behind an invisible mask, one after the other.
Text / LightView
MAKEITPREMIUM
INTERACTION_033CSS
Word By Word Reveal
Words fade up in sequence so the sentence assembles as you read it.
Text / LightView
INTERACTION_034CSS
Staggered Sentence Reveal
Sentences in a block arrive one at a time with a calm rhythm.
Text / LightView
INTERACTION_035CSS
Fade Up Paragraph
The workhorse: a paragraph lifts gently into place with no drama.
Text / LightView
MAKE IT
FEEL PREMIUM.
INTERACTION_036CSS
Clip Path Heading Reveal
A heading wipes into view as its clip rectangle opens left to right.
Text / LightView
MAKE ITPREMIUMKINETIC
INTERACTION_037CSS
Sliding Text Window
A fixed window shows one label at a time as the stack slides vertically.
Text / LightView
MAKE ITPREMIUMKINETIC
INTERACTION_038CSS
Rolling Words
One word in a sentence rolls over like a split-flap counter.
Text / LightView
MAKE ITPREMIUMKINETIC
INTERACTION_039CSS
Rotating Phrases
Full phrases cross-fade in place without shifting the layout around them.
Text / LightView
MAKEITPREMIUM
INTERACTION_040CSS
Kinetic Text
Oversized type scales and drifts in opposing directions for a poster feel.
Text / MediumView
PREMIUM SWEEP
INTERACTION_041CSS
Gradient Text Sweep
A light band travels through the letterforms like a reflection.
Text / LightView
npm run make-it-premium
INTERACTION_042CSS
Typewriter Text
Characters type in behind a blinking caret, then hold.
Text / LightView
▚◆VAULT/#%
INTERACTION_043CSS + JS
Decoding Text
Characters cycle through symbols before locking into the real word.
Text / LightView
▚◆VAULT/#%
INTERACTION_044CSS + JS
Scrambled Text Reveal
The whole string shuffles and settles like a mechanical board.
Text / LightView
HIGHLIGHTED
INTERACTION_045CSS
Text Highlight Sweep
A marker-style highlight wipes behind a keyword.
Text / LightView
MAKEITPREMIUM
INTERACTION_046CSS + JS
Scroll Synced Text Reveal
Words brighten as the scroll position moves through the paragraph.
Text / MediumView
VAULT
INTERACTION_047CSS
Letter By Letter Fade
Characters fade in one by one to draw the eye across the word.
Letters / LightView
VAULT
INTERACTION_048CSS
Character Wave
A slow sine wave travels through the characters of a word.
Letters / LightView
VAULT
INTERACTION_049CSS
Elastic Letters
Characters overshoot their final position then settle.
Letters / LightView
VAULT
INTERACTION_050CSS + JS
Scattered Letters Assemble
Characters fly in from random offsets and lock into the word.
Letters / LightView
VAULT
INTERACTION_051CSS
Letter Flip
Characters flip on the X axis like a departure board.
Letters / LightView
VAULT
INTERACTION_052CSS
Letter Blur
Characters sharpen from a heavy blur into crisp type.
Letters / MediumView
VAULT
INTERACTION_053CSS
Vertical Character Roll
Each character rolls up inside its own clipped slot.
Letters / LightView
VAULT
INTERACTION_054CSS + JS
Cursor Reactive Letters
Characters lift and brighten as the pointer passes over them.
Letters / LightView
VAULT
INTERACTION_055CSS + JS
Magnetic Characters
Characters are pulled toward the cursor then spring back.
Letters / LightView
VAULT
INTERACTION_056CSS
Liquid Letter Distortion
Characters skew and wobble like type on a moving surface.
Letters / MediumView
VAULT
INTERACTION_057CSS
Hover Letter Displacement
The hovered character pushes its neighbours aside.
Letters / LightView
VAULT
INTERACTION_058CSS
Variable Font Weight Animation
Weight animates from light to black across the characters.
Letters / LightView
VAULT
INTERACTION_059CSS
Character Stretch
Characters stretch vertically on entry then relax.
Letters / LightView
VAULT
INTERACTION_060CSS
Letter 3D Rotation
Characters rotate in on the Y axis with real perspective.
Letters / MediumView
VAULT
INTERACTION_061CSS
Glowing Letter Trail
A soft glow runs through the word one character at a time.
Letters / LightView
VAULT
INTERACTION_062CSS + JS
Letter Explosion And Assembly
Characters burst outward then reassemble into the word.
Letters / MediumView
SPLIT LINE
HERO REVEAL.
INTERACTION_063CSS
Split Line Hero Reveal
The hero headline arrives line by line from behind its own masks.
Headlines / LightView
SHIPFASTER
INTERACTION_064CSS + JS
Pinned Headline Transformation
A pinned headline changes scale and wording as the section scrolls.
Headlines / MediumView
SHIPFASTER
INTERACTION_065CSS
Expanding Keyword
One keyword grows and the rest of the line reflows around it.
Headlines / LightView
HEADLINE
INTERACTION_066CSS
Animated Headline Underline
A precise 2px rule draws itself under the headline.
Headlines / LightView
BUILT FOR
FOUNDERSDESIGNERS
INTERACTION_067CSS
Changing Emphasis Word
The emphasised word cycles through audiences or outcomes.
Headlines / LightView
PREMIUM MOTION —PREMIUM MOTION —PREMIUM MOTION —PREMIUM MOTION —
INTERACTION_068CSS
Horizontal Text Marquee
Oversized type scrolls sideways in a continuous loop.
Headlines / LightView
BUILT FOR
FOUNDERSDESIGNERS
INTERACTION_069CSS
Text Morphing
One phrase blurs and dissolves directly into the next.
Headlines / MediumView
PREMIUM MOTION —PREMIUM MOTION —PREMIUM MOTION —PREMIUM MOTION —
INTERACTION_070CSS
Oversized Typography Parallax
Giant type drifts slower than the content in front of it.
Headlines / LightView
SHIPFASTER
INTERACTION_071CSS
Headline Zoom Transition
The headline scales up slightly as the section takes focus.
Headlines / LightView
OUTLINE
INTERACTION_072CSS
Gradient Border Text
Outlined type with a light gradient travelling around the stroke.
Headlines / LightView
BUILT FOR
FOUNDERSDESIGNERS
INTERACTION_073CSS + JS
Scroll Controlled Headline Sequence
Three headlines swap in a pinned frame driven purely by scroll.
Headlines / MediumView
INTERACTION_074CSS
Sentence Opacity Progression
Sentences brighten in turn so attention moves down the block.
Copy / LightView
INTERACTION_075CSS
Reading Progress Highlight
A thin progress rule tracks how far the reader has moved.
Copy / LightView
INTERACTION_076CSS + JS
Scroll Word Activation
Individual words light up as the scroll line passes through them.
Copy / LightView
INTERACTION_077CSS
Paragraph Masking
A paragraph is revealed behind a soft gradient mask as it enters.
Copy / LightView
INTERACTION_078CSS
Keyword Emphasis Animation
Key terms in a paragraph brighten after the copy settles.
Copy / LightView
+
INTERACTION_079CSS
Expandable Supporting Copy
Extra detail expands smoothly without a jump in layout.
Copy / LightView
INTERACTION_080CSS
Animated Bullet Points
List items slide in with their markers drawing first.
Copy / LightView
+
INTERACTION_081CSS
Progressive Content Disclosure
Content blocks appear in stages as the reader advances.
Copy / LightView
INTERACTION_082CSS
Liquid Hover Button
A rounded fill rises from the bottom edge and floods the button.
Buttons / LightView
Animated border
INTERACTION_083CSS
Animated Border Button
A light segment travels around the border on hover.
Buttons / LightView
INTERACTION_084CSS + JS
Cursor Following Glow Button
A soft glow tracks the pointer inside the button surface.
Buttons / LightView
INTERACTION_085CSS
Sliding Label Button
The label slides up and a duplicate takes its place.
Buttons / LightView
INTERACTION_086CSS
Arrow Morph Button
The arrow exits right and re-enters from the left on hover.
Buttons / LightView
INTERACTION_087CSS + JS
Ripple Click Effect
A ripple expands from the exact press point.
Buttons / LightView
INTERACTION_088CSS
3D Press Interaction
The button depresses into its shadow like a physical key.
Buttons / LightView
INTERACTION_089CSS
Split Background Hover
Two halves of the background meet in the middle on hover.
Buttons / LightView
INTERACTION_090CSS
Button Loading Transition
The label collapses into a compact progress indicator.
Buttons / LightView
INTERACTION_091CSS
Button Success Animation
A check mark draws itself once the action completes.
Buttons / LightView
$49Get access
INTERACTION_092CSS
Sticky Mobile CTA
A CTA bar docks to the bottom of the screen after the hero.
Buttons / LightView
INTERACTION_093CSS
Expandable Card
A card grows in place to reveal its detail without a page change.
Cards / LightView
INTERACTION_095CSS
Horizontal Scroll Cards
A snap-scrolling row that reveals cards with depth as they pass.
Cards / MediumView
INTERACTION_096CSS
Glass Reflection Card
A soft reflection sweeps across the glass surface on hover.
Cards / LightView
INTERACTION_097CSS + JS
Cursor Reactive Card
The card content shifts subtly with pointer position.
Cards / LightView
INTERACTION_098CSS
Image Reveal Card
The image uncovers from behind the card copy on hover.
Cards / LightView
INTERACTION_099CSS + JS
Card To Modal Transition
The card expands into a modal from its own position.
Cards / MediumView
PRO
$49
INTERACTION_100CSS
Floating Feature Card
A key card breathes gently above the grid to signal importance.
Cards / LightView
INTERACTION_101CSS
Bento Grid Interaction
Hovering one tile dims and recedes the rest of the grid.
Cards / LightView
PRO
$49
INTERACTION_102CSS
Pricing Card Emphasis
The recommended plan lifts, brightens and holds a moving border.
Cards / LightView
“Shipped in a day”
INTERACTION_103CSS
Testimonial Carousel
Quotes cross-fade and slide with an auto-advancing rhythm.
Cards / LightView
INTERACTION_104CSS
Comparison Card Transition
Two states swap inside the same card frame.
Cards / LightView
INTERACTION_105CSS
Image Mask Reveal
The image uncovers behind a mask while it settles from a slow zoom.
Images / LightView
INTERACTION_106CSS + JS
Before And After Slider
A draggable handle wipes between two versions of an image.
Images / LightView
Media
INTERACTION_107CSS
Parallax Image
The image drifts slower than the frame that contains it.
Images / LightView
Media
INTERACTION_108CSS + JS
Cursor Zoom
The image magnifies around the exact pointer position.
Images / LightView
Media
INTERACTION_109CSS + JS
Image Trail
Thumbnails trail the cursor and fade out behind it.
Images / MediumView
Media
INTERACTION_110CSS
Image Distortion
A subtle ripple runs through the image on hover.
Images / HeavyView
INTERACTION_111CSS + JS
Image To Fullscreen
A thumbnail expands to fill the viewport from its own position.
Images / LightView
Hover to play
INTERACTION_112CSS
Hover Video Preview
A muted loop fades over the poster image on hover.
Images / MediumView
INTERACTION_113CSS
Cinematic Image Entrance
The image arrives with a letterbox open and a slow push-in.
Images / LightView
Media
INTERACTION_114CSS + JS
Product Image Rotation
A frame sequence spins the product as the pointer drags.
Images / MediumView
INTERACTION_115CSS
Layered Image Depth
Foreground, subject and background layers move at different rates.
Images / LightView
INTERACTION_116CSS
Horizontal Gallery Reveal
A gallery track slides sideways while images uncover in turn.
Images / MediumView
Home
Work
Pricing
INTERACTION_117CSS
Animated Mobile Menu
The panel slides in and links cascade behind it.
Navigation / LightView
Home
Work
Pricing
INTERACTION_118CSS
Fullscreen Navigation Reveal
A full-screen overlay wipes down and oversized links rise in.
Navigation / LightView
HomeWorkPricing
INTERACTION_119CSS
Expanding Navigation Pill
A pill indicator glides between nav items.
Navigation / LightView
HomeWorkPricing
INTERACTION_120CSS
Active Link Indicator
A rule wipes in under the hovered link and stays on the active route.
Navigation / LightView
HomeWorkPricing
INTERACTION_121CSS
Scroll Aware Navbar
The header hides on scroll down and returns on scroll up.
Navigation / LightView
HomeWorkPricing
INTERACTION_122CSS
Shrinking Navbar
The header compresses and gains a glass background after the hero.
Navigation / LightView
INTERACTION_123CSS + JS
Floating Dock
Dock icons scale with pointer proximity like a desktop dock.
Navigation / LightView
HomeWorkPricing
INTERACTION_124CSS
Mega Menu Reveal
A wide panel drops open with its columns cascading.
Navigation / LightView
HomeWorkPricing
INTERACTION_125CSS + JS
Page Transition Navigation
Clicking a nav link plays an exit before the next route paints.
Navigation / LightView
Vault/Text/Blur
INTERACTION_126CSS
Animated Breadcrumbs
Breadcrumb segments slide in as the path deepens.
Navigation / LightView
INTERACTION_127CSS
Sticky Storytelling Section
A sticky visual holds while the copy beside it advances.
Scroll / LightView
INTERACTION_128CSS + JS
Pinned Product Showcase
The product mockup is pinned while its features annotate in turn.
Scroll / MediumView
INTERACTION_129CSS + JS
Horizontal Scroll Section
Vertical scrolling drives a horizontal panel track.
Scroll / MediumView
INTERACTION_130CSS + JS
Scroll Controlled Frame Sequence
Scroll scrubs through an image sequence like a film strip.
Scroll / HeavyView
INTERACTION_131CSS
Depth Parallax
Three layers move at different speeds to build depth.
Scroll / LightView
INTERACTION_132CSS
Background Color Transition
Page surfaces shift tone as each section takes over.
Scroll / LightView
128
Effects shipped
INTERACTION_133CSS + JS
Scroll Number Counter
Statistics count up once as they enter view.
Scroll / LightView
INTERACTION_134CSS
Timeline Progression
A vertical line draws down and reveals each milestone.
Scroll / LightView
INTERACTION_135CSS
Zoom Through Section
The section scales up and passes the viewer as they scroll.
Scroll / MediumView
INTERACTION_136CSS
Stacked Scroll Panels
Sections stack over one another like cards on a table.
Scroll / LightView
INTERACTION_137CSS
Scroll Triggered Text Changes
A fixed caption swaps as the reader moves between blocks.
Scroll / LightView
STUDIO WORKSELECTED PROJECTSCONTACT
VIEWDesktop onlyINTERACTION_138CSS + JS
Cursor Label
A contextual word rides with the cursor over interactive areas.
Mouse / LightView
FOLLOW THE LIGHT
Desktop onlyINTERACTION_139CSS + JS
Cursor Spotlight
A wide soft light follows the pointer across a dark section.
Mouse / LightView
STUDIO WORKSELECTED PROJECTSCONTACT
Desktop onlyINTERACTION_140CSS + JS
Cursor Image Preview
A small preview image follows the pointer over a list of links.
Mouse / LightView
STUDIO WORKSELECTED PROJECTSCONTACT
Desktop onlyINTERACTION_141CSS + JS
Cursor Trail
A short trail of fading dots follows the pointer.
Mouse / MediumView
Magnetic
Desktop onlyINTERACTION_142CSS + JS
Magnetic Elements
Nearby controls are drawn toward the pointer.
Mouse / LightView
STUDIO WORKSELECTED PROJECTSCONTACT
Desktop onlyINTERACTION_143CSS + JS
Particle Trail
Fine particles spawn at the pointer and drift away.
Mouse / HeavyView
FOLLOW THE LIGHT
Desktop onlyINTERACTION_144CSS + JS
Blob Follower
A soft blob lags behind the pointer and deforms with speed.
Mouse / MediumView
DISTORT
Desktop onlyINTERACTION_145CSS + JS
Cursor Text Distortion
Type bends slightly toward the pointer as it passes.
Mouse / LightView
Desktop only
INTERACTION_146CSS + JS
Interactive Background Grid
Grid cells light up around the pointer as it moves.
Mouse / LightView
INTERACTION_147CSS
Gradient Mesh
Soft overlapping gradients drift behind the content.
Background / MediumView
INTERACTION_148CSS
Moving Spotlight
A slow beam sweeps across the section surface.
Background / LightView
INTERACTION_149CSS
Floating Particles
Fine dust drifts upward behind the content.
Background / MediumView
INTERACTION_150CSS
Star Field
A still field of stars twinkles at different rates.
Background / LightView
INTERACTION_151CSS
Aurora Gradient
Long ribbons of light fold slowly across the top of the section.
Background / MediumView
INTERACTION_152CSS
Grid Distortion
A technical grid bends gently around a moving focus point.
Background / MediumView
Film grain
INTERACTION_153CSS
Animated Noise
A fine film grain shifts frame to frame over the page.
Background / LightView
INTERACTION_154CSS
Liquid Blobs
Organic shapes morph slowly behind the content.
Background / MediumView
INTERACTION_155CSS
3D Wireframe
A perspective wireframe plane recedes into the distance.
Background / MediumView
INTERACTION_156CSS + JS
Interactive Dots
A dot matrix reacts softly to the pointer.
Background / LightView
INTERACTION_157CSS
Radial Glow
A single ambient glow breathes behind the hero content.
Background / LightView
INTERACTION_158CSS
Cinematic Gradient Drift
A wide dark gradient shifts imperceptibly across the page.
Background / LightView
Next route/WORK
INTERACTION_159CSS + JS
Curtain Transition
Panels close over the page then lift to reveal the next route.
Transitions / LightView
INTERACTION_160CSS
Blur Transition
The outgoing page blurs out and the next resolves into focus.
Transitions / MediumView
Next route/WORK
INTERACTION_161CSS
Slide Transition
Routes slide horizontally in the direction of travel.
Transitions / LightView
Next route/WORK
INTERACTION_162CSS + JS
Liquid Wipe Transition
A curved wipe sweeps across the screen between pages.
Transitions / MediumView
INTERACTION_163CSS + JS
Expanding Circle Transition
A circle grows from the click point to cover the page.
Transitions / LightView
Next route/WORK
INTERACTION_164CSS + JS
Shared Element Transition
A card image flies into position on the detail page.
Transitions / LightView
LOADINGVAULT
INTERACTION_165CSS
Loading Logo Reveal
The mark draws itself once, then the page takes over.
Transitions / LightView
LOADINGVAULT
INTERACTION_166CSS
Text Based Loader
Words cycle in a fixed slot while assets load.
Transitions / LightView
INTERACTION_167CSS
Progress Bar Loader
A thin top rule tracks navigation progress.
Transitions / LightView
INTERACTION_168CSS
Route Change Fade
The quietest option: a short lift and fade between routes.
Transitions / LightView