VIPEX Motion

Zero-dependency web effects. Every effect is one folder: a live demo with a control panel, a drop-in script, and docs. No frameworks, no build step, no network.

58effects
250presets
13categories
1902.1KB total
0dependencies

Preloaders

3
Dot DissolveA full-screen preloader: a dot grid in device pixels, two drifting noise fields eating smoke-shaped holes through it, and a per-dot scatter so the...26.3 KB · 4 presets Masthead BounceA preloader made out of the page's own wordmark. Both words start half a viewport apart in the middle of the screen at a fraction of their size; the...21.4 KB · 3 presets Preloader PackEight site-intro sequences behind one API: pick a preset, feed it your real load progress, and get a promise back when the page is on screen.46.5 KB · 8 presets

Page transitions

1
Transition PackFive full-screen page transitions plus a native View Transitions helper, behind one promise-based API that hands you the covered midpoint so you can...33.8 KB · 5 presets

Cursors

2
Cursor EngineOne drop-in script that replaces the native cursor with an eased follower — six presets from a minimal accent dot to a multi-state ring with text...17.7 KB · 6 presets Cursor TrailsFour pointer trails in one drop-in script: decaying character cells, media thrown by pointer velocity, a block-built mark that fills over targets...33.5 KB · 4 presets

Typography

5
Kinetic ReelA looping typographic reel where words, pills, cards, objects and shards fly in and cut each other off — driven entirely by a timeline you write as...54.7 KB · 4 presets Particle TextTurns any string into a cloud of particles that assembles into the letterforms, parts around the cursor, and morphs to the next word.32.4 KB · 4 presets Text RevealSplit-text reveal engine: splits any element into lines, words, or characters and animates them in with seven named looks — from masked line rises to...13.9 KB · 7 presets Text ScrambleDecode-style text animation engine: characters cycle through a charset and lock into the real text — on hover, on scroll into view, in a two-pass...12.7 KB · 4 presets Typewriter & FlipTwo typography effects in one module: text that types itself with a human, punctuation-aware rhythm and a blinking caret, and headline letters that...29.4 KB · 5 presets

Scroll

8
DialA sticky wheel of items that turns one step per screen of scroll — the item on duty parks at a fixed clock position while paired plates and a copy...20.1 KB · 3 presets Helix SectionA pinned closing section: photo plates ride a two-turn helix past the camera while hairline rails draw along the curve, the run resolves into a grid...52.1 KB · 4 presets Parallax PackLayered scroll parallax, pointer depth, scroll-velocity zoom and in-frame media parallax — four behaviours in one engine, declared in markup, behind...27.5 KB · 4 presets Pinned ScenesFour pinned scroll scenes from one engine — a clip-edge card wipe, a scrubbed mask reveal with a ghost-letter marquee, a horizontal timeline driven...32.3 KB · 4 presets Scroll RevealOne engine for every on-scroll entrance — copy that floats up, quiet fades, sections that assemble from mixed directions, iris and barn-door clip...16.8 KB · 10 presets Scroll StackOne engine, four sticky stacking modes — sections that cover each other, cards that pile with depth, a pinned crossfade stage, and a sticky media...13.4 KB · 4 presets Scroll KitFour scroll behaviours a real site needs — smoothed wheel, a header that reads the section beneath it, page-wide design tokens that tween between...28.4 KB · 4 presets Video ScrubScroll drives the frame. One engine either seeks a pinned <video> through a queue that never lets two seeks fight, or steps a canvas through a...28.7 KB · 6 presets

Hover & buttons

4
Folder FlapA 3D folder whose flap springs open on hover while the sheets stretch out behind it, the headline characters brighten in sequence and an arrow cursor...21.2 KB · 3 presets Hover PackTen hover and button micro-interactions driven by one data-hover attribute — underlines, sweeps, floods, magnets, canvas trails, and pixel fills, all...25.9 KB · 10 presets Spotlight MaskA circular window follows the cursor across a stacked pair of layers — dim base below, lit version above — magnetising to marked points and easing...21.3 KB · 3 presets Works ListAn index of project rows: hover one and the fill grows from the edge your cursor crossed, the type inverts through it, and a thumbnail pops open...36.3 KB · 3 presets

Navigation

3
Ellipse OverlayA contact layer or fullscreen menu that arrives as a grid of dots dissolving in around a tilted ellipse: the page behind it blurs, the links stagger...36.1 KB · 3 presets Nav DarknessHover a nav item and the room goes dark: the corners close in on the page with a torn, noise-eaten edge — a preview of where the click would take...26.4 KB · 3 presets Navigation PackSeven site-menu mechanics on one engine — morphing pill bar, drop panel, full-screen mega menu, split reveal, character overlay, scrambling link row...63.4 KB · 7 presets

Carousels & marquees

5
Constellation CarouselCards orbit a tilted ellipse at one steady pace, whatever part of the curve they are on. Hover scales a card and desaturates the rest; scroll shoves...35.9 KB · 3 presets Drag Curve RowAn endless row of panels that bows with the speed of your drag, ripples under the cursor, and lifts one panel to fill the frame on click — WebGL2...37.2 KB · 3 presets MarqueeSeamless infinite marquee engine — one transform loop, clone-filled at any viewport, with hover pause, drag-with-inertia throw, and an optional...11.4 KB · 4 presets Momentum CarouselA drag-physics slider: the track follows your pointer one-to-one, keeps gliding when you let go, and pulls back like elastic at either end — with an...23.1 KB · 4 presets Slider SetOne carousel engine with four personalities — a choreographed product feature slider, a full-bleed looping hero, a WebGL slide-to-slide transition...57.9 KB · 4 presets

Fluid & distortion

5
Flowmap EngineThe pointer writes its own velocity into a small ping-pong texture; that fading trail then warps images, shreds headlines and opens up a second...42.1 KB · 3 presets Fluid EngineA GPU stable-fluids simulation you can drop behind a hero, use as the wipe between two images, or pour through your headline — one script, three...65.6 KB · 3 presets Fog FluidA hero section that behaves like weather: a generated landscape plate bent by a pointer-driven fluid simulation, two enormous cloud plates crawling...52.2 KB · 3 presets Ripple EngineWater-ripple hover distortion: every surface runs a damped wave simulation in a small ping-pong texture, and the pointer's own movement stamps drops...58.9 KB · 3 presets Smudge MetalA surface that only wakes up where the cursor touches it: the pointer path is kept in a smudge buffer, eroded with curl noise and grain, and used as...49.0 KB · 4 presets

Shader backgrounds

3
CRT OverlayA picture-tube glass layer for ordinary DOM — barrel curvature, bezel, vignette, rolling scanlines, aperture grille, phosphor grain, glare, chroma...22.4 KB · 4 presets Fog HeroA drifting volumetric fog background for a hero section, lit by a pointer trail that swirls, thickens and lights the smoke as it moves through it.35.2 KB · 4 presets Halftone MediaA halftone compositor for video, images and canvases: every cell samples the picture once and asks a threshold map whether to light up. Six built-in...43.0 KB · 4 presets

3D & orbs

1
Orb EngineA raymarched glass, metal, crystal or gem sphere that ripples under the pointer and carries an orbiting ring of HTML labels — one fragment shader, no...53.4 KB · 5 presets

Generative canvas

9
Block StackA strip that drops blocks and builds its own pixel skyline, then flickers apart on click and grows into a hands-on block sandbox — place shapes...26.8 KB · 2 presets Drifting CardsA field of cards crossing a tilted plane on a slow loop. The cards are ordinary elements, so their text stays sharp and selectable; the art behind...17.8 KB · 3 presets Helix FlowA frayed pixel band that enters loose on the left and tightens into a clean, rung-bridged helix on the right — with a pointer that parts the strands...20.2 KB · 3 presets Particle FunnelThousands of pixel particles flow through staged gates and split at a pass check — most rise and turn to the accent colour, the rest drop out red...22.6 KB · 3 presets PictogramsSixteen generative canvas loops behind one engine — a set of owned, endlessly looping marks for empty states, feature grids, loading plates, section...58.0 KB · 16 presets Pixel FacesChunky pixel heads on one canvas whose eyes follow the pointer, blink on a jittered timer, and answer a hover in their own temper: a spring jump with...16.9 KB · 3 presets Pixel FieldA grid of heat cells behind your content: the pointer paints into it, time decays it, thresholds turn it into colour bands. The same grid also holds...25.2 KB · 4 presets Radial StringsA ring of dots turning around a bright centre, each one tethered by a spring-loaded string that sways on wind, carries a pulse outward, and bends...30.8 KB · 4 presets SVG MotionSix cheap generative background pieces in one script — noise line fields, pulse lattices, depth tunnels, thrown plates, confetti and flickering glyph...63.3 KB · 6 presets

Interface widgets

9
AccordionCollapsible rows that animate to a measured pixel height — FAQ lists, exclusive Q&A, rich portfolio rows whose thumbnails fly into a full-size media...22.7 KB · 4 presets Bento KitA responsive bento grid that fits itself to the viewport, plus a tile treatment in four shapes — square, chamfer, arch and rule — each with a mono...21.4 KB · 4 presets Custom scrollbarA drawn scroll rail — hairline, chunky, or a reading-progress meter — that reports the scroll position and drags it, without taking scrolling over.20.0 KB · 3 presets Image HotspotsMarkers pinned to a picture in percentages, each with a popover and an optional link — plus a built-in editor that places them by drag and hands you...35.4 KB · 3 presets LightboxA gallery overlay with an address. Every item gets a ?item= route, so a view can be linked and reopened; the overlay itself traps focus, walks the...40.5 KB · 3 presets Sound layerSeven interface sounds — hover, click, open, close, success, error, type — mapped to the events your markup already fires, and synthesised at...23.5 KB · 3 presets Terminal formA contact form that reads like a console session — numbered lines, prompts that type themselves, choices printing in one at a time, and a...34.2 KB · 3 presets Theme KitNamed palettes written to CSS custom properties on the root element — swapped instantly, behind a masked sweep, or with a crossfade — with a...20.2 KB · 4 presets Video modalA watch-video dialog with real player chrome — clearing overlay, glass control pills, loading ring, seek bar — that traps focus, hands it back on...43.1 KB · 3 presets

Showcase pages

2
Showcase — EditorialA long-form essay page built entirely out of library engines. Nothing here re-implements motion: the page loads seven modules by relative path, calls...page Showcase — Immersive one-pagerA finished dark landing page for an invented studio, built entirely out of the library's own engines. Nine of them run on one page at once: a GPU...page