Drag to bend the current
Chromatic Flow Field
Thousands of luminous traces ride a slowly rotating vector field. Push your pointer through it and the whole current bends around you, then heals.
Motion Lab / Edition 02
Animation that earns its place on your site.
Thirteen live studies in CSS, SVG, Canvas and WebGL — every one of them interactive, hand-written and running at full frame rate. Grab them, fling them, break them. This is the motion we build into client work.
01 — Live specimens
Ten techniques you can put your hands on.
Nothing here is a video. Every panel is real code rendering in your browser right now — drag it, fling it, pause it, reset it. Filter by the technique you want to see, and each card tells you exactly how it's built.
Rendering at — fps
Push the letters around
Kinetic Typography
Each glyph is an independent spring-damped body. Your pointer repels them, gravity-free momentum carries them, and they always find their way home.
Grab the rope and fling it
Grab & Fling Rope
A real Verlet-integrated rope with gravity, damping and constraint relaxation. Pick up any point, whip it around, and let it settle.
Hold to become gravity
Micro Cosmos
A generated solar system with velocity-tinted trails. Hold anywhere to become a temporary gravity well and tear the orbits apart.
CSS
3D
NO
LIBS
60
FPS
Inertial 3D Object
Six translucent planes in real CSS 3D space. Throw it and angular momentum carries it on, decaying naturally back to an idle drift.
Move to disturb, click to ripple
Ripple Matrix
Hundreds of cells solve a distance field against your pointer. Click and a real expanding wavefront travels outward through the grid.
Blob
Click to morph
Shape Memory
One path smoothly interpolates between five completely different silhouettes — every control point eased individually, so it works in every browser.
Paint with your pointer
Silk Ribbon Trail
A chain of eased segments becomes a tapered ribbon with a live gradient. When you stop, it keeps breathing on its own.
Nebula
Click for a new sky
Aurora Weather
Three blurred radial layers in screen blend mode drift like weather systems. Pure CSS animation — the browser does all the work on the compositor.
incoming transmission
Hover or click to decode
Decoder Text
A character-by-character scramble that resolves left to right. Cheap, accessible, and perfect for headline reveals that don't hurt your LCP.
We build motion with intent, tune it for performance, and ship it without a single megabyte of framework.
02 — Full screen
Three heavier experiments.
These three are demanding enough to deserve their own page, so the lab above stays fast. Each one runs full-bleed, framework-free, and pauses itself the moment you switch tabs.
DEEP DIVE 01
Particle Network
Depth-layered nodes link to their neighbours with colour-blended gradients. Move to bend the field, click to fire a shockwave.
Open demo DEEP DIVE 02Liquid Metaball Shader
Raw GLSL raymarches glowing spheres that melt into one molten mass. Click to launch new droplets into the field.
Open demo DEEP DIVE 03Gooey Liquid Metaballs
An SVG blur-and-contrast filter fuses a swarm of circles into one liquid creature that chases your cursor around the page.
Open demo03 — How we work
Idea to interface, in four moves.
Motion is the last 10% — it only works when the structure, content and performance budget underneath it are right. Here's the order we do it in.
01
Discover
We map your goals, your users and the search intent you actually need to win — before a pixel moves.
02
Design
Interfaces are prototyped straight in code. What you review is what ships — no static mockup gap.
03
Build
Semantic markup, a hard performance budget, and animation hand-tuned to the compositor.
04
Launch
We ship, measure Core Web Vitals, and keep refining. Motion earns its place or it comes back out.
04 — Built with
Just the platform.
Every effect on this page uses browser-native APIs. No animation library, no bundler, no runtime cost you didn't ask for.
HTML5CSS Custom PropertiesCSS 3D TransformsSVGCanvas 2DWebGL / GLSLWeb Animations APIIntersectionObserverResizeObserverPointer EventsrequestAnimationFrame
05 — Common questions
Before you ask, here's what people usually do.
Straight answers about performance, cost and how this fits into a real build, not just this lab page.
Will animation like this slow my website down?
Not if it's built properly. Everything here only animates GPU-friendly properties (transform, opacity, filter), runs on requestAnimationFrame with a hard frame budget, pauses itself the moment a tab loses focus or a demo scrolls off-screen, and respects prefers-reduced-motion. The same discipline goes into every client build: motion is tuned against Core Web Vitals, not layered on top of them.
Is this just a demo, or do you actually build this into client sites?
Real work, not a showreel. These thirteen studies are the same techniques we scale down and adapt into bespoke websites and QuickSites: a hero canvas here, a kinetic headline there, a morphing icon on a pricing card. We only add motion where it earns its place and supports the page's goal.
What's the actual difference between CSS, SVG, Canvas and WebGL animation?
CSS and the Web Animations API are cheapest and best for UI-level motion (hovers, reveals, transitions). SVG handles vector shape and path morphing cleanly. Canvas 2D is for particle counts and physics too high for the DOM to handle smoothly. WebGL/GLSL is for shader-level effects like the liquid metaball demo, more GPU power, more setup, reserved for moments that really need it.
Will it work on mobile, older browsers and touch devices?
Yes. Every study here responds to touch and pointer events, degrades gracefully on older browsers, and has zero third-party dependencies to slow a phone down. On a real site, anything heavier gets progressively enhanced: the layout and content always work first, motion is the enhancement layered on top.
Do you use animation libraries like GSAP or Framer Motion?
Not by default. Everything on this page is hand-written against native browser APIs, which keeps the payload small and gives us full control over performance. If a project specifically calls for a library (a complex scroll-driven build under a tight deadline, say) we'll use one, but it's a choice, not a default.
Is custom animation an extra cost, or part of a normal website build?
Light interaction (hovers, reveals, smooth transitions) is standard on every AskMind build. Bespoke, heavier motion like a custom hero canvas or an interactive visualiser is scoped per project depending on complexity. Talk to us about your site and we'll tell you plainly what's included and what isn't.
06 — Let's talk
Want an interface people actually remember?
Book a free strategy call. We'll look at your current site together and show you exactly where motion, structure and performance could be working harder for you.
Talk to AskMind- A live review of your current build
- Three specific, prioritised improvements
- No pitch deck, no obligation