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 pure CSS/HTML folder component — a leather-bound cover that swings open on click to release a fanned stack of files, using nothing but a hidden checkbox for state, custom-property-driven transforms for the fan, and a CSS counter that reads its own file count off the DOM.
Step-by-step breakdown of a pure CSS/HTML folder component — a leather-bound cover that swings open on click to release a fanned stack of files, using nothing but a hidden checkbox for state, custom-property-driven transforms for the fan, and a CSS counter that reads its own file count off the DOM.
Step-by-step breakdown of a CSS/SVG-only sticker effect — a scattered set of cute, tinted emoji that jiggle in place like paper cutouts, using nothing but an animated SVG displacement filter and three offset copies of it so nothing wiggles in lockstep.
Step-by-step breakdown of a CSS-only button effect — a set of glassy, tilted pill buttons where hovering swaps a single CSS custom property to melt the surface into color, without ever touching true 3D stacking that would break hit-testing.
Step-by-step breakdown of a WebGPU page effect — a lamp that follows the cursor across a flat plane behind your text, where the plane’s own rendered brightness becomes the alpha channel that hides or reveals the words sitting underneath it.
Step-by-step breakdown of a WebGL glass demo — droplets that merge and split like real liquid, a fragment shader that turns their combined field into lens refraction, fresnel, and chromatic aberration, and a fixed-timestep loop that keeps the whole thing stable at any frame rate.
Step-by-step breakdown of a horizontal-scroll org chart — a pinned canvas that scrubs sideways with the page scroll, connector lines that draw themselves in as each branch enters view, a traveling "pulse" that loops along finished lines, and role cards that pop in with a claymorphic, dark-workshop finish.
Step-by-step breakdown of a full-viewport cloth sketch — a grid of "knots" linked by distance-constrained "threads" that sag under gravity like fabric, each knot rendered as a pre-rasterized glyph pulled from the page’s own script tag, tilted to match its local thread angle, and stirred in real time by the pointer.
Step-by-step breakdown of a full-viewport studio homepage — a ring of tilted work cards placed on an ellipse with polar math, a spinning centerpiece built entirely from generated CSS divs standing in for a 3D chain, a wheel/touch listener that rotates the whole ring in place of page scroll, and a click-to-view overlay that reuses each card’s exact image source so the viewer never shows a different frame than the one clicked.
Step-by-step breakdown of a full-viewport surf headline — a pair of seamlessly-looping SVG wave layers generated from summed sine harmonics, a headline sandwiched between them so the nearest wave visually breaks over its lower half, a mirrored copy of the headline masked into the water so it ripples in lockstep with the wave that casts it, and a small continuous rotate/translate wobble so the type itself feels afloat.
Step-by-step breakdown of a full-viewport image wave scroll — a tall photo band baked once onto a canvas and repeated in a WebGL texture, a fragment shader that bends the band into a wandering wave using two overlaid sine waves, and a single scroll offset driven by wheel, drag, touch, and arrow keys with inertia so the whole thing keeps drifting after input stops.
Step-by-step breakdown of an Apple-style liquid glass navigation bar — a frosted glass shell with an ambient blob mesh behind it, a pill that slides between tabs on a bouncy spring curve, an interactive glare that follows the cursor across the whole surface with mix-blend-mode overlay, full roving-tabindex keyboard support, and a theme toggle plus reduced-motion path that keep the whole thing accessible.
Step-by-step breakdown of a 3D image gallery that reads as a slowly rotating sphere of cards — an even point distribution computed once with the Fibonacci sphere algorithm, a scroll-progress value mapped straight onto rotateX/rotateY with no animation library involved, a moving focus window that lights up whichever cards face the viewer, and a resize/reduced-motion path that keeps the whole thing honest at any viewport.
Step-by-step breakdown of a hover-and-drag text piece — a mask canvas that turns a block of source code into a filled silhouette, several independent rope threads spun off with position-based physics, per-string ambient sway, and a single pointer that can grab, fling, and release any one thread without disturbing the others.
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.