Animation is a
design decision
Kinetic is a template for sites that move. Scroll-driven reveals, cursor-reactive cards, magnetic buttons and self-drawing SVG — built on transforms and opacity only, and fully disabled for visitors who prefer reduced motion.
Twelve effects, none of them a library
Every pattern here is transform and opacity only, so the browser can composite it on the GPU without touching layout.
- Hover
Cursor tilt
Cards rotate toward the pointer with a spring easing and settle back when it leaves. This card is doing it right now.
transform: perspective + rotateX/rotateY
- Scroll
Line reveal
Headings arrive one line at a time from behind a mask, staggered by ninety milliseconds so the eye can follow.
translateY(110%) inside overflow-hidden
- Hover
Magnetic buttons
The call to action drifts toward the cursor within its own bounds, then springs home. Subtle enough that most people only feel it.
translate() driven by pointer offset
- Scroll
Self-drawing SVG
A stroke draws itself in when the section enters view, using dash offset rather than a JavaScript tween.
stroke-dasharray + stroke-dashoffset
- Scroll
Scroll progress
A rail across the top of the story section scales horizontally with how far through it you are.
scaleX() bound to bounding-rect position
- Ambient
Infinite marquee
A duplicated track translating by exactly half its width, so the loop point is invisible. Pauses on hover.
translateX(-50%) on a doubled list
- Scroll
Staggered grid
Cards fade up in sequence with a delay derived from index, rather than every card firing at once.
IntersectionObserver + transition-delay
- Scroll
Depth parallax
Background shapes drift at a fraction of scroll speed to imply distance without moving real content.
translateY(scroll × factor)
- Scroll
Count up
Numbers animate from zero when they enter view, easing out so the final digits settle rather than snap.
requestAnimationFrame with easeOutQuad
- Hover
Underline sweep
A gradient rule scales from the left edge on hover. Used on cards where a full lift would be too much.
scaleX with transform-origin left
- Hover
Blur bloom
A soft gradient blob scales behind a card on hover, adding warmth without a second image request.
scale() on a blurred radial gradient
- A11y
Reduced-motion fallback
Not an effect but the most important pattern here. Every animation above is switched off, not merely shortened.
prefers-reduced-motion:reduce guards
Motion with a performance budget
Three rules that decide whether an effect ships.
-
Transform and opacity, nothing else
Animating width, top, margin or box-shadow forces the browser to recalculate layout on every frame. Transform and opacity are composited on the GPU and cost almost nothing. Every effect in this template is written within that constraint, which is why it holds sixty frames on hardware that is several years old.
-
The observer does the work, not the scroll handler
Attaching effects to a scroll event runs your code dozens of times a second whether anything is visible or not. IntersectionObserver fires only when an element crosses a threshold, and it unobserves itself once it has done its job. The only scroll listener here drives the progress rail, and it is passive.
-
Reduced motion means off, not faster
A shortened animation is still an animation, and for someone with vestibular sensitivity the duration is not the problem — the movement is. Every pattern in Kinetic checks the media query and returns early, leaving the content visible and static rather than animating it quickly.
The small things people feel but do not notice
Hover over any of these. The effect should register as responsiveness rather than as decoration.
-
Lift on hover
Two pixels of vertical travel and a shadow. Enough to say the card is interactive, little enough to avoid a jolt.
translateY(-8px)
-
Underline sweep
A gradient rule grows from the left rather than fading in, which reads as direction instead of decoration.
scaleX 0 → 1
-
Border warm-up
The border shifts to the primary colour before anything else moves, so the change is legible even at a glance.
border-color 300ms
-
Magnetic pull
The primary call to action drifts toward the cursor and springs back, at a strength most people never consciously register.
translate() by pointer delta
What people say after shipping it
Mostly about the parts that do not move.
“The reduced-motion handling is the reason we bought it. Every other animated template we tried just shortened the durations and called it done.”
“Sixty frames on a four-year-old Android, which is more than I can say for the library-based template we replaced.”
“No GSAP, no Framer, no Lottie. It is transforms and an IntersectionObserver, and it does everything we needed.”
Before you buy
The things developers ask about an animated template.
None. Every effect is CSS transitions and keyframes driven by a small amount of vanilla TypeScript using IntersectionObserver and pointer events. There is no GSAP, Framer Motion, Lottie or AOS anywhere in the bundle.
Effects are disabled rather than shortened. Scroll reveals leave content visible, tilt and magnetic handlers never attach, the marquee stops and the SVG path renders complete. That is a hard requirement, not a setting.
The animation code is a few kilobytes of TypeScript with no dependencies, and every effect is transform or opacity so it does not trigger layout. The usual performance risk in a template like this is images, not motion.
Each pattern is independent — delete the section component or the data attribute and nothing else breaks. The CSS is grouped in one clearly marked block in input.css.
Content renders fully. Scroll reveals stay visible, and the CSS-only effects such as the marquee and hover states still run. Only the pointer-driven effects need JavaScript.
Motion, without the frame drops
Twelve patterns, no dependencies, and an accessibility story you can actually defend in review.