Ideas, breakdowns, and real talk - from the world of business and code. Written by the Aduok team, for people who want to keep learning.
Step-by-step breakdown of a hover-driven 3D card — a perspective wrapper that tilts the whole surface on rotate3d, a frosted glass panel raised above it on the z-axis, five orbiting rings that each pop forward at a different depth and delay, and a footer row of actions that lifts free of the surface only while the card is tilted.
Step-by-step breakdown of a hover-driven 3D card — a perspective wrapper that tilts the whole surface on rotate3d, a frosted glass panel raised above it on the z-axis, five orbiting rings that each pop forward at a different depth and delay, and a footer row of actions that lifts free of the surface only while the card is tilted.
Step-by-step breakdown of a live split-flap clock — six digit units built from stacked half-cards and a rotating 3D leaf, a front/back-face flip that reveals the next number exactly halfway through, a setTimeout-driven midpoint swap that keeps the bottom half in sync, and a single tick() function that drives the whole board every second.
Step-by-step breakdown of a rotating circular gallery — cards placed on a circle with offset-path, an enlarged center view driven purely by CSS anchor positioning and :target, a hover chain that nudges neighboring cards using :has() distance selectors, and a rotation slider tied to a single CSS custom property.
Step-by-step breakdown of a water-filled glass button — a lane-based shallow-water simulation that sloshes instead of bobbing, droplets that tear off the surface and land back in the fluid, a sleep/wake cycle so the canvas goes idle when nothing is moving, and a frosted CSS glass pane wrapped around a single-color canvas fill.
Step-by-step breakdown of a scroll-free image drop-in deck — per-card position and depth read from CSS custom properties instead of hand-written classes, a center-out entrance stagger, an idle float loop that never syncs up, cursor parallax across the whole deck, and a real per-card 3D tilt on hover, all wrapped in role-correct, reduced-motion-safe markup.
Step-by-step breakdown of a CSS-only day/night toggle — a single data-mode attribute driving every visual change at once, a sun and moon crossfading in place instead of swapping images, JS-generated stars instead of hand-written divs, and an actual role="switch" button instead of a clickable div.
Step-by-step breakdown of a CSS-only "pop button" list — a solid offset box-shadow standing in for a cartoon outline, a staggered translateY entrance driven purely by nth-child delays, and a hover squish that fakes squash-and-stretch with a single two-step keyframe.
Step-by-step breakdown of a CSS-only washing machine loader — a body panel drawn from three stacked background-images, two control knobs faked with radial gradients, a duplicated foot faked with a single box-shadow, and a spinning porthole whose diagonal glass reflection and slow-to-fast wash cycle come from one gradient and one keyframe animation.
Step-by-step guide to building an animated field of water ripples — concentric ovals generated with JavaScript instead of a Sass loop, sized in container query units so they scale with the viewport, staggered into rolling groups with a single delay formula, and finished with a light-blue palette and a floating control deck for blur, ripple count, and speed.
Step-by-step guide to building a side-view animated beach in pure CSS — a sky-to-sun gradient, a rolling sea made from stretched ovals instead of any curve syntax, a foam layer that fades in and out on its own clock, a wet-sand tide mark that darkens on the swell, and a palm tree built entirely from border tricks.
Step-by-step guide to building an image gallery that winds up a helix and scrolls without end — a canvas atlas packing every photo into one texture, a plane bent into a spiral by its own vertex positions, a fragment shader that wraps its UV coordinate to fake infinity, and a small physics rig turning wheel, drag, and touch input into one smooth offset.
Step-by-step guide to building a translucent, face-reacting "ghost" that trails the pointer around the page — a chain of spring-physics dots rasterized into a canvas texture, sampled by a GLSL fragment shader that carves a procedural face out of noise, with a dependency-free control panel for tuning it live.
Step-by-step guide to building a bento-style image grid that starts as a compact collage and smoothly zooms into a fullscreen stacked layout as the user scrolls — driven entirely by GSAP's Flip plugin capturing two CSS grid states and ScrollTrigger scrubbing between them, with resize handling and reduced-motion support built in.
Step-by-step guide to building a physics-driven product carousel where neighboring cards peek in from the edges of the screen, dragging follows the pointer in real time, releasing snaps with velocity-aware speed, and a data-driven rail tracks a real attribute of whichever card is centered — no carousel library, just a handful of small functions.
Step-by-step guide to building a scroll-scrubbed text effect where a heading scatters into individual letters blown apart by a directional wind — per-character measurement via the Range API, a de-trended sine gust, four stagger-ordering modes, and a resize-safe ScrollTrigger setup — zero images, zero canvas, just GSAP and vanilla JS.
Step-by-step guide to building a looping sand text effect with the Canvas 2D API — a five-phase state machine, an offscreen-canvas word sampler, gravity-driven falling grains, a sand-slide pile relaxation pass, and an eased flight-back reform — zero frameworks, zero build tools.
Step-by-step guide to building a multi-layer parallax scrolling portrait gallery using Three.js sprites, an OrthographicCamera, CSS drag and wheel events, and a class-based architecture — zero frameworks, zero build tools.
Step-by-step guide to building the FIFA bouncing ball wordmark animation using only CSS custom properties, independent rotate and translate properties, a synced scaleY squish on the letter I, and Noto Emoji for a crisp cross-platform soccer ball — zero JavaScript, zero dependencies.
Step-by-step guide to building an animated wallet card UI using only CSS custom properties, BEM class naming, SVG pocket shapes, scaleY card fan animations, and sibling-combinator balance reveal — zero dependencies, zero frameworks.
Step-by-step guide to building an animated SVG vertical-lines hover effect using only CSS custom properties, nth-child transition delays, scaleY transforms, and a JavaScript line generator — zero dependencies, zero frameworks.
Step-by-step guide to building a spinning, light-blue 3D cube loader using only CSS custom properties, preserve-3d transforms, conic-gradient face gradients, perspective rotation animations, and a glowing drop shadow pseudo-element — zero JavaScript, zero dependencies.
Step-by-step guide to building a scroll-driven photo grid where a hero image shrinks from full-viewport to its natural cell size as surrounding image rings scale and fade in — using a sticky canvas, CSS subgrid, a custom cubic-bezier solver, and a plain scroll event listener. Zero libraries, zero dependencies.
Step-by-step guide to building a tactile, physics-informed glass button using only CSS custom properties, conic-gradient borders, layered box-shadows, backdrop-filter blur, and a perspective tilt on press — zero JavaScript, zero dependencies.
Step-by-step guide to building a tactile, physics-informed rocker switch using only CSS custom properties, perspective transforms, layered box-shadows, and a hidden checkbox — zero JavaScript, zero dependencies.
Step-by-step guide to building a smooth three-dot bouncing loader with squash-and-stretch physics, staggered delays, and dynamic shadows — using only CSS keyframes and custom properties. Zero JavaScript, zero dependencies.
Building a bouncing radio button — a glowing dot that hops between options using CSS transitions, delayed timing, and a sideways bounce animation. No libraries, no animation loop, just CSS and a small JS setup step.
A complete walkthrough of building a smooth hover-reveal lens effect using two images, an OffscreenCanvas destination-out mask, and a radial gradient feather edge — no libraries, no CSS tricks, just the 2D Canvas API doing exactly what it was made for.
A step-by-step walkthrough of building a smooth, accessible Off-Track Loader using a single SVG path, CSS stroke-dashoffset animation, a multi-stop linear gradient, and a jolt keyframe that mimics reactive physics — no JavaScript, no libraries.
A step-by-step breakdown of building an interactive 3D rotating card carousel using only CSS custom properties, the CSS tan() math function, transform chains, and a procedurally generated HTML file — no JavaScript frameworks, no physics engines, no canvas libraries.
Step-by-step guide to building an interactive silly string physics simulation using the HTML5 Canvas API, Verlet integration, constraint-based links, SVG collision maps, and a procedurally drawn spray can — no frameworks, no physics engines, no libraries.
Step-by-step guide to building an e-commerce order button with a fully animated delivery truck sequence — package loading, door hatches, speed lines, headlight glow, and a checkmark draw-on — using only CSS keyframes and 13 lines of JavaScript.
Step-by-step guide to building an animated delete button with a trash icon, paper-shredding animation, and a checkmark confirmation — no frameworks, no libraries, minimal JavaScript.
Step-by-step guide to building a deadline countdown loader featuring an animated walking Death character, a scythe-swinging arm, a writing designer, a red progress fill, and a colour-wipe day counter — no frameworks, no jQuery, no libraries.
Step-by-step guide to building a hover-reveal login form with a dual-layer spinning conic-gradient border, glass panel, and smooth CSS transitions — no frameworks, no libraries, no JavaScript.
Step-by-step guide to building a fully interactive credit card form with live card preview, real-time input mirroring, and a smooth 3-D flip animation when the CVV field is focused — no frameworks, no libraries.
Step-by-step guide to building a fully animated orbiting sand-ball loader using only CSS custom properties, conic gradients, and keyframe animations — no JavaScript, no images.
Step-by-step guide to building a fully animated pencil loader using pure SVG and CSS keyframe animations — real pencil colors, no JavaScript.
Deep-dive article on building a procedural scorpion IK cursor experience.