Every one runs live, with a step-by-step explanation and code you can edit and paste into your own project.
Neon bars drawn from a JSON dataset: switch the year and each bar grows or shrinks to its new value, the scale on the back wall follows, and the peak lights up. Hover or tap a bar for its value. JS only turns the data into one number per bar.
A neon line chart drawn as SVG from a JSON array, floating on a tilted glass panel in layers. Hover and it lies flat so you can read the values. The tilt is on the container, so the same works for a chart from any library.
Each bar is a real cuboid — front, side and top face — growing on a staggered delay.
Real time needs JS. Each pair that changes re-triggers a CSS rotateX flip.
Sliders feed perspective and rotation straight into CSS, with the current values shown live.
A conic-gradient disc repeated in twelve translateZ layers. Lower layers are darkened, which reads as a solid wall, and a radial mask on each layer cuts the hole.
Points placed with the translate property inside a wireframe box that spins by CSS. Dragging anywhere on the canvas pauses the spin and adds a manual rotation; every point counter-rotates so it stays a round sphere.
A speedometer dial tilted in perspective, with raised ticks and a needle stacked from four layers. The buttons only set --value; CSS turns it into an angle and an overshooting transition swings the needle there.
Five event cards stand beside a road, each a step further back in Z. Prev / Next only change one number, --a; the whole track slides toward you by that many steps, so the active card comes to the front.
A week-by-weekday grid of commits where every value is a block: taller and hotter the bigger it is. Hover or tap a block to read it. JSON sets one number per block; CSS turns it into a height and a colour.
Quarterly revenue split by product, each quarter a column of stacked glass cuboids. The legend is a row of toggles: switch a product off and its segments shrink to nothing while the ones above slide down. JS only writes where each segment starts and how tall it is.
A conversion funnel drawn from JSON: every stage is a glass slab as wide as its share of the first one. Switch the channel and the slabs narrow or widen to the new numbers; point at a stage and one tooltip glides there with its conversion from the stage before. JS only turns the data into one number per stage.
Twelve days of prices from a JSON response as glass 3D candles: teal for a day that closed up, pink for down. Point at or tap a candle and one tooltip glides to it with its open, high, low and close; switch to 7 days and the scale zooms in. JS only turns each price into a fraction of the scale.
A month of cash flow as floating neon glass boxes: the starting balance, each gain stepping up and each loss stepping down, and the ending balance JS works out. Switch the month and every box glides to its new place. JS only turns the data into three fractions per step.
A crypto market map from JSON: each tile’s area is its market cap, its height and colour are the move, teal up and pink down. Switch 24h / 7d and the blocks rise and sink; hover or tap one for its numbers. JS only lays out the tiles and writes one number per tile.
Two series compared on six axes, drawn as SVG from a JSON object, on a plate lying back with each series floating at its own height. Switch a series on or off below; hover or tap the chart and it lies flat, with one tooltip gliding from axis to axis.
Three neon progress rings, like a fitness watch, drawn from a JSON list of days: each arc is value ÷ goal, and past 100% it runs into a second lap. Switch the day and the arcs sweep to the new numbers; hover or tap a ring for its figures. JS only writes one number per ring.
Seats by plan as a thick donut lying back in 3D, drawn from a JSON object: JS turns the values into one conic-gradient, a stack of layers gives it thickness, the total stands up in the hole and a legend sits beside it. Switch a plan off below and the ring re-divides; hover or focus the chart and it lifts toward you.
Men and women by age band as 3D bars running out both ways from a column of ages, drawn from a JSON object (illustrative figures). Switch between 1994 and 2024 and every bar grows or shrinks on one fixed scale; point at or focus a band and its numbers show under the chart.
Eight cafés from a JSON array as shaded spheres over a floor grid: price across, rating up, cups a day as size (illustrative figures). Each sphere hangs on a drop line to its shadow on the floor and turns back against the chart’s tilt, so it always faces you; point at or focus one and a card shows its numbers.
An Earth turning on a tilted axis, its continents cut from flat clip-path sheets laid on the sphere, with six flight routes arcing between ten cities and a plane flying each one, round the back and out again. The ocean is a single camera-facing disc that hides whatever turns behind its middle, and each arc is a half circle on the chord between its two cities, leant nearly level with the equator so that, seen from 28° above, no arc ever turns edge-on.