Effects you can
take apart.

Every effect here comes with X-ray mode: switch its layers on and off, tune it with sliders, watch the code rewrite itself — then copy your version.

Open the lab
move your mouse — the background is one of the effects
The collection

Pick an effect, tear it open

Don't just customize the effect — understand what you're changing. Every control points at the exact line of code it drives.

Particle Network X-ray ready
Floating dots linked by proximity, repelled by your cursor. Three layers, four knobs.
GLITCH
Glitch Text X-ray ready
A clean headline that misbehaves on a schedule: scramble, RGB split, sliced strips.
Split Reveal X-ray ready
Words rising from behind an invisible edge, one after another.
SHINE ON
Gradient Shine X-ray ready
A gradient painted into the letters, with a band of light passing through on a cycle.
Magnetic Button X-ray ready
Leans toward your cursor inside an invisible radius, springs back with a wobble.
3D Press Button X-ray ready
A face over a darker body: it sinks when pressed and springs back with an overshoot.
Shine Sweep X-ray ready
A slanted beam of light crosses the button — hover it, or watch it fire on its own.
Wavy Gradient X-ray ready
Glowing blobs on slow orbits with film grain — a breathing liquid background.
▍
Typewriter Text X-ray ready
A counter pretending to be a person: types, pauses, erases, types the next phrase.
The light follows your cursor
Spotlight Hover X-ray ready
Two radial gradients pinned to the cursor — surface glow plus a lit border rim.
Starfield Warp X-ray ready
Stars flying at you with warp streaks — 3D perspective from a single division.
Ripple Click X-ray ready
Expanding water rings from every click, with echo waves and a soft impact fill.
Confetti Burst X-ray ready
A firework made of paper: launch, gravity, flutter and a soft fade at the end.
SCRAMBLE
Text Scramble X-ray ready
A frontier sweeps the string: resolved letters behind, flipping chaos ahead.
◆ Tilt me
3D parallax
Parallax Card X-ray ready
3D tilt toward the cursor with inner layers floating at different depths.
Wave Lines X-ray ready
Stacked sine waves flowing like water, with accent lines for rhythm.
Cursor Trail X-ray ready
A silk ribbon with sparks chasing your cursor — rainbow or brand purple.
Aurora Glow X-ray ready
Northern lights curtains slowly folding across a night sky.
Dot Grid Reactive X-ray ready
A precise dot field that bends and lights up around your cursor.
Matrix Rain X-ray ready
Falling glyph columns whose tails are drawn by fading, not by memory.
Flow Field X-ray ready
Particles obeying an invisible field — tick one box and see the arrows.
Follow the edge
Border Beam X-ray ready
A focused beam travels around a card rim with a soft outer halo.
0
Counter Roll-up X-ray ready
Numbers accelerate from zero and land softly on a formatted target.
Wavy Text X-ray ready
Letters riding one sine wave — position, tilt and colour are three readings of it.
Neon Flicker X-ray ready
A neon sign with a buzzing halo — one tired tube stutters, the rest hold steady.
Blur Focus Reveal X-ray ready
Words arriving from out-of-focus to sharp, like a camera pulling focus.
Constellation X-ray ready
A quiet star field that connects into constellations around your cursor.
Fireflies X-ray ready
Warm specks wandering organically, each pulsing on its own beat.
Grid Pulse X-ray ready
A calm tech grid with waves of light rolling out from the center.
Decrypt Reveal X-ray ready
A classified document declassifying itself behind a moving frontier.
Circular Text X-ray ready
Text on a slowly turning ring, like a stamp or a badge.
♥ Like
Heart Burst X-ray ready
Hearts spray with real gravity; the button pops on a spring.
One Two Three
Elastic Tabs X-ray ready
The indicator stretches between tabs like gum and lands with a wobble.
Toggle Morph X-ray ready
A day/night switch whose knob squashes like liquid mid-flight.
Glow Pulse CTA X-ray ready
A breathing glow that quickens the moment your cursor arrives.
Skeleton Shimmer X-ray ready
Content stand-ins with a band of light washing through, card by card.
Dots Wave X-ray ready
The three-dots loader with personality: one wave, three readings.
0%
Percentage Counter X-ray ready
0→100 that sprints early, lands gently and pops at the finish.
Meteor Shower X-ray ready
Shooting stars whose tails are drawn as gradients, not remembered.
Metaballs X-ray ready
Blobs that merge like liquid — the goo falls out of simple addition.
0%
Scroll Progress X-ray ready
The one number every scroll effect starts from — as a bar, a ring, a colour.
Pinned.
Swapping.
In steps.
Sticky Reveal X-ray ready
A pinned panel that swaps its story in steps while you scroll.
Parallax Layers X-ray ready
Near rushes, far crawls — depth from nothing but speed.
Pull back
Zoom Hero X-ray ready
The hero recedes into the page as you scroll — scale, dim, counter-move.
Text Highlight on Scroll X-ray ready
A marker keeps pace with your reading, word by word.
Horizontal Gallery X-ray ready
Scrolling down travels sideways — the comfortable price of the exotic direction.
I lean with your scroll speed
Scroll Velocity Skew X-ray ready
Content leans into fast scrolling and springs back upright.
Image Sequence Scrub X-ray ready
Scroll as a video playhead over pre-rendered frames.
Pin & Morph X-ray ready
A pinned circle spends your scroll on becoming a square.
0
Count-in Sections X-ray ready
Counters that wait for their entrance into the viewport.
Sticky Stack Cards X-ray ready
Each new card covers the last, which shrinks into the deck — the 2025-26 hit.
Staggered Grid Reveal X-ray ready
Tiles enter on a diagonal wave — the delay formula is the wind.
A finished page
what is it made of?
<h1>
<p>
X-ray Spotlight Signature ✦
The cursor becomes an X-ray lens: skeleton under it, design around it.
I pop on a spring
Tooltip Spring X-ray ready
Tooltips on real physics: overshoot, wobble, settle.
Morphing Shapes Loader X-ray ready
Circle → square → triangle: the same 90 points, re-dressed.
Progress Orb X-ray ready
A glass orb filling with rippling liquid as the percent climbs.
Why this exists

No more black boxes

Most effect libraries let you preview, customize and copy. But when the snippet half-works on your site — too fast, wrong colour, too heavy on mobile — you still don't know which of those forty lines to touch.

TinkerFX goes further: take the effect apart. Toggle its layers off and watch the matching code get struck through. Point at any line and the control that owns it lights up — and back. Then try your complete effect loadout on this very site, and copy YOUR version with your numbers baked in.

Built for everyone who builds websites — developers, designers, and people who build with AI and just want the thing to look right.