Motion & 3D
The words behind the wow: parallax, scrollytelling, WebGL, shaders and every effect people ask for by name.
3D website
A 3D website uses real-time 3D graphics, like a rotating product, an explorable scene or a whole world, rendered live in the browser rather than as video.
Bento grid
A bento grid is a layout of rounded tiles in different sizes, like a bento lunch box, used to present several features or facts in one scannable block.
Custom cursor
A custom cursor replaces or decorates the system pointer with a designed shape, often one that grows, labels or reacts to what it hovers.
Game world website
A game world website turns a site into a playable place: visitors move through a 3D world, like driving a car through a city, where each location is a page, product or store.
Glassmorphism
Glassmorphism is a style of translucent, frosted-glass panels that blur whatever sits behind them, with a thin light edge to suggest thickness.
glTF
glTF is the standard file format for 3D models on the web, often called the JPEG of 3D; GLB is its single-file binary version.
Gradient mesh
A gradient mesh is a soft, multi-point blend of colours that flows like an aurora, often animated slowly behind a hero section.
Grain texture
A grain texture is a faint layer of noise over a design that removes the flat, digital look and adds warmth like film or print.
GSAP
GSAP is a widely used JavaScript animation library for precise, timeline-based motion, including its ScrollTrigger plugin for scroll-linked effects.
Hover effects
Hover effects are visual changes that happen when a pointer moves over an element, like a card lifting, an image zooming or a link underlining.
Immersive website
An immersive website surrounds the visitor with an experience, often full-screen 3D, sound and motion, so browsing feels like entering a place rather than reading a page.
Kinetic typography
Kinetic typography is text that moves, such as letters that assemble, words that slide in or headlines that scramble, to add energy and emphasis.
Liquid glass
Liquid glass is a glass-like interface style where panels refract and bend the content behind them, with highlights that move as if the surface were a thick, fluid lens.
Lottie
Lottie is a format for lightweight vector animations exported from design tools and played in the browser, often used for icons and illustrations.
Magnetic button
A magnetic button drifts toward the cursor as it gets close, then snaps back, making the button feel physical and inviting a click.
Marquee
A marquee is a band of text or logos that scrolls continuously across the screen, often used for client logos, announcements or bold statements.
Micro-interactions
Micro-interactions are small, single-purpose animations that respond to what a visitor does, like a button that presses in, a heart that fills or a field that shakes on an error.
Morphing
Morphing is smoothly transforming one shape, element or layout into another, so the eye follows the change instead of seeing a cut.
Neumorphism
Neumorphism is a soft, extruded style where elements look pushed out of or pressed into the background using matching light and dark shadows.
Page transitions
Page transitions animate the change from one page to the next, such as a fade, slide or shared element that morphs, so navigation feels continuous.
Parallax scrolling
Parallax scrolling moves background and foreground layers at different speeds as you scroll, creating an illusion of depth.
Particle effects
Particle effects animate many small points, such as sparks, dust, stars or confetti, to create atmosphere, motion trails or bursts of celebration.
Raymarching
Raymarching is a shader technique that draws 3D scenes described by maths instead of meshes, stepping each pixel's ray forward until it hits a surface.
Scroll-driven animation
Scroll-driven animation ties an animation's progress to scroll position instead of time, so elements animate exactly as far as the reader has scrolled.
Scrollytelling
Scrollytelling is telling a story through scrolling: each scroll step reveals, animates or transforms content, so the page plays like a film the reader controls.
Shader
A shader is a small program that runs on the GPU for every pixel or vertex, calculating colour and shape; shaders create effects like liquid metal, glow, ripples and gradients.
Shockwave effect
A shockwave effect is a ring of distortion that bursts outward from a point, bending the image behind it like a blast or a stone dropped in water.
Smooth scrolling
Smooth scrolling eases the page's movement so scrolling glides rather than jumps, either natively in the browser or with a library that interpolates scroll position.
Sticky scroll
Sticky scroll pins a section in place while the rest of the page keeps scrolling, often while its contents change, like a slideshow driven by scroll.
Text scramble effect
A text scramble effect cycles random characters before settling on the real word, as if the text were being decoded on screen.
Three.js
Three.js is the most widely used JavaScript library for 3D on the web; it wraps WebGL with cameras, lights, materials and models so developers can build scenes quickly.
View Transitions API
The View Transitions API is a browser feature that animates between two states of a page, or two pages, by morphing matching elements from one to the other.
WebGL
WebGL is the browser technology that draws hardware-accelerated 2D and 3D graphics inside a web page using the device's GPU, with no plugin.
WebGPU
WebGPU is the newer browser graphics and compute API that succeeds WebGL, giving web pages closer-to-native access to the GPU for faster 3D and parallel computing.