Proof of capability
The Interactive Effects Lab
Everything on this page is live and built by hand — the same techniques we weave into the websites we build for Hampshire businesses.
Effect gallery
Every card below responds to you. Hover, click and scroll your way through.
Shaking Letters
HoverHover each letter to watch it lift and shift colour individually.
Technique: Per-character state + CSS transform
Typewriter
AutoText types itself out, pauses, deletes and cycles to the next phrase.
Technique: React state machine + setTimeout
Ripple Click
ClickClick anywhere on the button to spawn a ripple from your cursor position.
Technique: Dynamic DOM node + CSS keyframes
Morphing Shape
AutoA gold form endlessly morphs between organic shapes.
Technique: CSS @keyframes on border-radius
Staggered Cascade
ClickItems slide in one after another. Hit replay to re-trigger the sequence.
Technique: Per-item animation-delay
Cursor Trail
MouseMove your cursor inside the box to leave a fading trail of gold.
Technique: mousemove + timed state array
3D Tilt & Glare
HoverThe card tilts in real 3D space while a glare tracks your cursor.
Technique: perspective + rotateX/Y + radial-gradient
Pulsing Glow
AutoGentle outward pulses draw the eye to what matters most on a page.
Technique: CSS @keyframes on box-shadow
Animated Gradient
AutoA living gradient that shifts continuously — depth without heaviness.
Technique: animated background-position
Scroll Counter
ScrollNumbers count up from zero the moment they enter view — ideal for stats.
Technique: IntersectionObserver + requestAnimationFrame
Magnetic Button
HoverThe button is drawn to your cursor, then springs back when you leave.
Technique: mousemove offset + spring easing
Reveal on Scroll
ScrollEvery card on this page faded and lifted into place as you scrolled. That's this.
Technique: IntersectionObserver + transform transition
Full element shake
The kind of feedback we build into forms so a customer never wonders what went wrong.
This box will shake when you click below