3D and graphic motion, all original and built on Insight4D's design system. Every number here is an example, not a real draw result.
1 · 3D draw drum
Twenty numbered balls tumble in a drum. Press Draw and four of them roll out and settle in a row, number facing you.
Loading 3D…
Drawn– – – –Example numbers
Three.js r128 (WebGL) · 20 balls r=0.62 in a drum R=3.2 · gravity 14 · restitution 0.55 · drum spin lifts balls (tangential force 3, 9 while drawing) · draw: 4 balls, 1.1s each, stagger 0.25s, ease cubic-bezier(0, .7, .07, 1) · ball scale 1 → 1.35 · pixel ratio capped at 2 · pauses off-screen
2 · Charts that draw themselves
The line is drawn on, then its points pop in; the digit bars grow with a small overshoot.
Draws per month (example)
How often each digit appears (example)
line: stroke-dashoffset draw-on 1.4s ease cubic-bezier(.44, 0, .56, 1) · points pop: scale 0 → 1, stagger 0.07s · bars: 0.7s, stagger 0.05s, overshoot ease cubic-bezier(.34, 1.56, .64, 1) (an easing curve that overshoots, standing in for a spring) · plays when scrolled into view
3 · Soft light behind a live panel
A small shader draws slow-moving light in Insight4D's own purple and beige. It stays pale so the number on top stays easy to read.
LIVE
0469
Example number
fragment shader, 4 summed sine layers · colours #e0d7fa → #fce3cf → white · time scale 0.4–0.6 · renders at 0.5× resolution · frozen frame when reduced motion is on or the tab is hidden