Skip to content

Home Blog Components Projects About

Search articles

Enter a keyword to search.

Esc to close

H.

Henry

Programming notes and projects.

Subscribe via RSS

Filter articles

Categories

前端112 Notes1

Tags

JavaScript Vue React Browser Async programming State management Performance Engineering AI Learning notes

All components210

Text animation36

Entrances & reveals9

Decode Reveal
Blueprint Lettering
Particle Lettering
Diamond RevealPro
Outline Lettering
Blur Reveal
Filled Lettering
Folded Lettering
Staggered Lettering

Lighting & letterforms15

Wave Lettering
Responsive Letterforms
Proximity Lettering
Signal Glitch
Echo Lettering
Focus Trail
Layered Lettering
Flowing Color Text
Text Sheen
Spectrum LetteringPro
HUD Lettering
Noise Lettering
Pointer Scramble
Letter SpotlightPro
Glyph Art

Scrolling & loops4

Scroll-Speed Marquee
Scroll Lift
Arc Marquee
Orbit Lettering

Counters & rotating text8

Phrase Cycle
Phrase Loop
Flipboard Text
Number Rise
Text Pointer Trail
Gravity Text
Typing Loop
Glyph Shuffle

Animation40

Cursor effects12

Click Burst
Pointer Glow
Fluid Ink Trail
Target Lock Pointer
Swarm Trail
Crosshair Pointer
Image Wake
Pixel Wake
Fluid Pointer
Ghost Trail
Pointer Grid
Ribbon Trail

Entrances & transitions8

Dither Reveal
Scroll Unfold
Blur Fade
Soft Reveal
Reveal Container
Halftone Reveal
Pixel Image Swap
Pixel Wipe

Hover & borders5

Magnetic Pull
Arc Border
Peel Sticker
Hover Sheen
Starlight Edge

Shapes & materials15

Magnetic Lines
Spring Mesh
Electric Emblem
Image Orbits
Laser Stream
Grain Overlay
Cube Field
Radiant Rings
Metallic Finish
Logo Marquee
Merging Orbs
Soft Shape Field
Ripple Image
Flowing Strands
Particle Orbit

Interface components45

Navigation menus9

Layered Menu
Orbit Menu
Pill Navigation
Panel Navigation
Tick Navigation
Gallery Menu
Fluid Tabs
Bubble Navigation
Floating Dock

Cards & panels14

Spring Cards
Focus List
Scroll Card Stack
Reflective Panel
Pointer Spotlight Card
Spotlight Panels
Color Spotlight Grid
Card Rotation
Edge Glow
Holographic Profile
Perspective Card
Swipe Card Stack
Pixel Reveal Card
Dissolve Card

Galleries & carousels11

Masonry Gallery
Poster Flight
Arc Gallery
Content Carousel
Drifting Gallery
Dome Explorer
Flex Gallery
Spiral Loop
Morph Gallery
Expand Gallery
Perspective Carousel

Forms & utilities6

Step Flow
Rolling Counter
Arc Input
Curved Picker
Sheen Button
Open Folder

Spatial & glass5

Model Explorer
Glass Lens
Glass Shortcuts
Badge Physics
Refractive Panel

Background55

Light & beams13

Edge Rays
Falling Light
Speed Tunnel
Light Scanner
Light Threads
Radiant Tunnel
Woven Light
Light Columns
Luminous Column
Light Ribbons
Ray Field
Lightning Field
Luminous Fibers

Gradients & fluids15

Shadow Veil
Magnetic Fluid
Iridescent Flow
Grain Flow
Color Blinds
Color Waves
Color Currents
Plasma Flow
Silk Flow
Aurora Flow
Fluid Atmosphere
Energy Waves
Molten Surface
Soft Aurora Field
Liquid Mirror

Grids & geometry15

Ripple Matrix
Shape Drift Grid
Interactive Waves
Reactive Dots
Dither Field
Radar Sweep
Contour Flow
Drifting Dots
Prism Tiles
Drifting Image Grid
Layered Wave Slices
Image Warp Grid
Line Currents
Pixel Pulses
Pixel Vortex

Space & particles9

Bouncing Spheres
Spectrum Prism
Spectrum Burst
Particle Depth
Starfield Galaxy
Luminous Orb
Pixel Flurries
Ember Eye
Atomic Orbits

Retro & noise3

CRT Screen
Signal Terminal
Character Static

Micro-interaction34

Buttons & confirmation4

Slide to Confirm
Sling Action
Undo Countdown
Press to Confirm

Inputs & selection11

Wave Slider
Jelly Choice
Spring Segments
Spring Checkbox
Prompt Composer
Playful Input
Glide Picker
Comet Control
Soft Toggle
Drag Value Input
Code Entry

Status & feedback12

Grid Loader
Lift Rating
Progressive Frame
Swipe Notice
Task Status
Soft Tooltip
Thinking Status
Call Status
Notification Bell
Heartbeat Button
Liquid Gauge
Voice Capsule

Gestures & playful effects7

Swipe Actions
Branch Menu
Crumpled Paper
Two-Sided Card
Tear-Off Ticket
Paper Shredder
Floating Files

Ripple Image

Spread ripples across an image surface, using local refraction to create a water-like interaction.

Loading component…

ComponentsAnimation

Component directory

All components210

Text animation36

Entrances & reveals9

Decode Reveal
Blueprint Lettering
Particle Lettering
Diamond RevealPro
Outline Lettering
Blur Reveal
Filled Lettering
Folded Lettering
Staggered Lettering

Lighting & letterforms15

Wave Lettering
Responsive Letterforms
Proximity Lettering
Signal Glitch
Echo Lettering
Focus Trail
Layered Lettering
Flowing Color Text
Text Sheen
Spectrum LetteringPro
HUD Lettering
Noise Lettering
Pointer Scramble
Letter SpotlightPro
Glyph Art

Scrolling & loops4

Scroll-Speed Marquee
Scroll Lift
Arc Marquee
Orbit Lettering

Counters & rotating text8

Phrase Cycle
Phrase Loop
Flipboard Text
Number Rise
Text Pointer Trail
Gravity Text
Typing Loop
Glyph Shuffle

Animation40

Cursor effects12

Click Burst
Pointer Glow
Fluid Ink Trail
Target Lock Pointer
Swarm Trail
Crosshair Pointer
Image Wake
Pixel Wake
Fluid Pointer
Ghost Trail
Pointer Grid
Ribbon Trail

Entrances & transitions8

Dither Reveal
Scroll Unfold
Blur Fade
Soft Reveal
Reveal Container
Halftone Reveal
Pixel Image Swap
Pixel Wipe

Hover & borders5

Magnetic Pull
Arc Border
Peel Sticker
Hover Sheen
Starlight Edge

Shapes & materials15

Magnetic Lines
Spring Mesh
Electric Emblem
Image Orbits
Laser Stream
Grain Overlay
Cube Field
Radiant Rings
Metallic Finish
Logo Marquee
Merging Orbs
Soft Shape Field
Ripple Image
Flowing Strands
Particle Orbit

Interface components45

Navigation menus9

Layered Menu
Orbit Menu
Pill Navigation
Panel Navigation
Tick Navigation
Gallery Menu
Fluid Tabs
Bubble Navigation
Floating Dock

Cards & panels14

Spring Cards
Focus List
Scroll Card Stack
Reflective Panel
Pointer Spotlight Card
Spotlight Panels
Color Spotlight Grid
Card Rotation
Edge Glow
Holographic Profile
Perspective Card
Swipe Card Stack
Pixel Reveal Card
Dissolve Card

Galleries & carousels11

Masonry Gallery
Poster Flight
Arc Gallery
Content Carousel
Drifting Gallery
Dome Explorer
Flex Gallery
Spiral Loop
Morph Gallery
Expand Gallery
Perspective Carousel

Forms & utilities6

Step Flow
Rolling Counter
Arc Input
Curved Picker
Sheen Button
Open Folder

Spatial & glass5

Model Explorer
Glass Lens
Glass Shortcuts
Badge Physics
Refractive Panel

Background55

Light & beams13

Edge Rays
Falling Light
Speed Tunnel
Light Scanner
Light Threads
Radiant Tunnel
Woven Light
Light Columns
Luminous Column
Light Ribbons
Ray Field
Lightning Field
Luminous Fibers

Gradients & fluids15

Shadow Veil
Magnetic Fluid
Iridescent Flow
Grain Flow
Color Blinds
Color Waves
Color Currents
Plasma Flow
Silk Flow
Aurora Flow
Fluid Atmosphere
Energy Waves
Molten Surface
Soft Aurora Field
Liquid Mirror

Grids & geometry15

Ripple Matrix
Shape Drift Grid
Interactive Waves
Reactive Dots
Dither Field
Radar Sweep
Contour Flow
Drifting Dots
Prism Tiles
Drifting Image Grid
Layered Wave Slices
Image Warp Grid
Line Currents
Pixel Pulses
Pixel Vortex

Space & particles9

Bouncing Spheres
Spectrum Prism
Spectrum Burst
Particle Depth
Starfield Galaxy
Luminous Orb
Pixel Flurries
Ember Eye
Atomic Orbits

Retro & noise3

CRT Screen
Signal Terminal
Character Static

Micro-interaction34

Buttons & confirmation4

Slide to Confirm
Sling Action
Undo Countdown
Press to Confirm

Inputs & selection11

Wave Slider
Jelly Choice
Spring Segments
Spring Checkbox
Prompt Composer
Playful Input
Glide Picker
Comet Control
Soft Toggle
Drag Value Input
Code Entry

Status & feedback12

Grid Loader
Lift Rating
Progressive Frame
Swipe Notice
Task Status
Soft Tooltip
Thinking Status
Call Status
Notification Bell
Heartbeat Button
Liquid Gauge
Voice Capsule

Gestures & playful effects7

Swipe Actions
Branch Menu
Crumpled Paper
Two-Sided Card
Tear-Off Ticket
Paper Shredder
Floating Files

© 2026 Henry

鄂ICP备2026021103号-3