UI Lab
Image → fully animated, interactive N2 component. Each section is one conversion — a designhub component, not the n2 vendor — proven here first.
finance card — dot-matrix bars develop in L→R; hover a bar for its value, click to select (headline counts to that period, #4B9CD3 ring); ··· opens the timeframe menu; bars are a keyboard radiogroup. Delta paired with ▲ (color-safe).
analytics card — climbing line draws in L→R with a pulsing end-node; hover to scrub (crosshair + value tooltip); Week/Month/Max is a keyboard radiogroup that re-draws the line and counts the total; ⚙ opens settings. ↗ paired with the delta (color-safe).
heart-rate card — floating range capsules grow in across the day; hover for a slot's min–max; ♡ toggles favorite. Colorblind-safe: peak ▲ / min ▼ / now-ring+pulse carry meaning beyond color (dot+word+glyph+motion).
phone screen — "Browse your dreams". Real WebGL page-curl (Candillon Riveo shader via three/R3F): drag from the right edge to peel the journal page; release to turn → next dream. Calendar jumps days; selected = #4B9CD3 ring + dot below number for has-dream. Reduced-motion → crossfade turn.
phone screen — a weekday calendar that SELECTS an entry and a timeline that OPENS it, in one motion. Tap a day → its timeline card expands (accordion, one open), the node-dot fills solid, the row scrolls into view. Calendar is a keyboard radiogroup; cards toggle by chevron; "Full entry" slides up a sheet (Esc + outside-click close). Colorblind-safe: has-entry = dot below the number, selected = #4B9CD3 ring + box, node = outline→filled disc, tags = glyph + word — never hue alone.
bike-computer HUD — a real ghost bicycle (Tabler glyph, MIT) develops L→R (ONE clip-path sweep), an instrument floats over it. The histogram is a ride playing back: a "now" cursor sweeps the splits and the big km/h ticks to the bar under it; hover seizes control (scrub + tooltip, playback pauses), leave resumes. Speed/Power/Cadence is a keyboard radiogroup that re-draws bars and crossfades ALL readouts. Colorblind-safe: peak = ▲ cap + top position + #4B9CD3 ring; the live now-element is the lone pulsing thing (motion, not hue).
water-intake widget — glowing corner brackets "scan" in then breathe; a % ring gauge draws its arc and counts up. Tap/hover a weekday and the ring, the "L today" headline and the % all recompute together (count-up); the day's label boxes (selected) and a tooltip shows its liters. Bars are a keyboard radiogroup. Colorblind-safe: the source's green-vs-blue is replaced by ONE accent — meaning rides on the % number + arc length + ▲(goal met), selected = #4B9CD3 box + cap-dot, and over-goal is a diagonal-HATCH cap (texture + position above the goal line), never hue.
phone screen — a week strip that SELECTS a day and a score card that is that day's full portrait, repainted as one motion. Pick a weekday pill → the score (count-up), MODERATE/HIGH/LOW label, signed delta AND the day's bar chart all transition together; pills are a keyboard radiogroup with a shared sliding highlight. Bars scrub on hover (time · score tooltip); the menu button opens a slide-down sheet (Esc + outside-click). Colorblind-safe: selected pill = inverted fill + taller + the lone sliding highlight (shape + motion, not white-vs-gray); peak = #9b7bd4 + marker dot + ▲ + top position; delta glyph follows the sign (↗/↘) + word — never hue alone.
glass budget-burn widget — an orbital glow ring draws in then breathes; a tick burn-bar fills via ONE clip-sweep toward the daily budget. Tap a category and its slice of the bar brackets + accent-highlights while the big $ readout and % crossfade/count to that category's contribution; re-tap or Esc returns to total. Rows are a keyboard radiogroup; hover the bar to scrub ($X of $Y). Colorblind-safe: the source's rainbow categories (orange/green + blue/purple confusion axes) are dropped — identity rides on rank (position) + amount + a distinct per-row glyph, the burn is ONE #4B9CD3 accent + the % number, and selection is a #4B9CD3 box + filled glyph + slice bracket — never hue.
full glassmorphic dashboard — a three-tier material system (blurred fabric ground → real backdrop-blur GLASS cards → SOLID white sidebar + near-black accent cards), pure greyscale. Apple-grade spring microinteractions: sliding active-nav pill (layoutId), area-chart draw-on, concentric ring sweep + count-up, spring checkboxes, a ⋯ context menu that pops + staggers (outside-click/Esc), card hover-lift. Colorblind-safe by construction — state is solid pill / filled box / arc + numeral, never hue. Standalone at /idraft-dashboard-lab. Source: public/ui-lab/sources/idraft-dashboard.jpg.
Hi, Dilan!
for all time
stopped
Done: Develop a new plan for Alina's education; Print a new timetable; Buy …
dark glass banking dashboard — three material tiers (neutral grey fabric ground → near-black green-tinted SOLID cards → REAL backdrop-blur emerald GLASS hero panel + glossy credit card). Accent law: emerald = ambient wealth, purple = the selected/now. Apple-grade springs: sliding purple filter pill + white rail disc (layoutId), revenue bars that draw up and relocate the purple+node+tooltip on select (keyboard radiogroup), a donut ring that draws + swaps its center on legend hover, count-up balances, card-stack hover-fan, hover-lift transaction rows, a Spending sparkline that draws on mount. Colorblind-safe — ring reads by position, chips carry sign glyph + context, selection is fill+position not hue. Standalone at /ui2-lab. Source: public/ui-lab/sources/ui2.jpg.
My Dashboard
Revenue Flow
Available
neumorphic soft-UI workflow dashboard — a three-tier material system (flat matte DESK → opaque putty FABRIC where every shape is a PAIR of soft shadows, no borders/glass → dark SOLID nav rail + gear). Pure greyscale + one mint accent (the ↑204% delta, paired with a ▲ glyph — color-safe). Apple-grade soft-rubber springs: a raised active pill that SLIDES between rail icons / sidebar items / document-tree folders (layoutId), a 340 count-up (seeded at target), a sliding tab underline (keyboard radiogroup), press-to-inset buttons, hover-lift on the stat card. Right pane fades rightward (faithful to the presentation crop). Standalone at /reagle-dashboard-lab. Source: public/ui-lab/sources/reagle-dashboard.jpg.