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.
five supplied mobile visual systems translated into one desktop Absolute Rest appendix. The stacked cards, week trajectory, metric detail, observation matrix, and single-night instrument remain recognizable—now organized as a report page with one visual point per section. Values are grounded in the existing 92-night wearable fixture and stay descriptive rather than clinical verdicts. Standalone at /ar/sleep-report-reference-lab. Sources: public/ui-lab/sources/ar-sleep-report-reference-01.jpg through -05.jpg.
Absolute Rest · report appendix
One report, a closer read.
DESKTOP REFERENCE LAB
Five supplied visual systems translated into a desktop appendix: summary first, then one visual point per section. The report’s data contract stays in charge.
Josh’s appendix direction · one point per page01 · summary
Your sleep, in focus.
A calm read of the last 92 nights, kept at the report level.
02 · week view
Bedtime variance
around your usual bedtime
A descriptive timing measure, shown as an average plus variance—not a nightly status.
03 · metric detail
Wake variance
About
How much your wake time shifted around its usual point. It is a timing description, not a nightly clinical status.
Used in the report alongside bedtime variation and total sleep time.
04 · distribution
Sleep efficiency
of time in bed classified as asleep
05 · nightly shape
Sleep duration
Wearable average across 92 nights.
dark dawn-gradient phone screen — a week day-strip that SELECTS a day (keyboard radiogroup, sliding #4B9CD3 ring; future days = dashed rings, color-safe), a 74 STRESS LEVEL that counts up + recomputes on select, a glass WEEKLY TREND card whose near-white line DRAWS L→R into a dashed forecast with a pulsing gold end-node + workout-bar markers (hover to scrub), a draggable SLEEP range slider (number morphs), and a floating glass tab bar with a sliding layoutId pill. Real backdrop-filter glass over the warm ground. prefers-reduced-motion snaps. Source: public/ui-lab/sources/panora-stress.jpg.
dark habit screen — a GitHub-style contribution heatmap whose filled #4A9FE0 cells spell M-O-V-E (meaning lives in the letterform SHAPE, one accent, color-safe), revealed as an L→R wave (pattern, not per-cell nodes); a 59% consistency count-up with a spin-on-click refresh; Current 0 / Longest 18 streak cards (flame breathes on an active streak); and a Bía Analysis AI-insight card whose orange sparkle twinkles once and staggers in its bolded metrics. Source: public/ui-lab/sources/consistency-cluster.jpg.
You followed the caffeine cutoff 24 out of 31 days and it’s already showing. On nights you stuck to it your sleep consistency trended up 20% with a +12% sleep impact. The data is clear, this protocol works for you.
LIGHT warm-cream lab-result screen (its own material — serif display, hairline-bordered white cards, warm amber→rust data ramp) tuned to read as a raised light plane against the dark lab canvas (border + micro-shadow, no drop-shadow). Serif 16.0 g/dL counts up; an In-range pill + a dotted range meter whose marker slides to position within a banded zone (word + position, color-safe); an About card; and a dotted-scatter TREND whose warm value-dots rise into place column-by-column over a tiled faint dot-field (perf: field is one gradient, not 360 nodes). Hover a column for month · value. Source: public/ui-lab/sources/hemoglobin-lab.jpg.
dark sleep screen — an orange-sparkle AI insight line over a 2×2 glass Highlights grid: Bedtime/Waketime with draggable diagonal-hatch sliders (time morphs as you drag), a Consistency Streak whose amber checks fill L→R with a breathing flame, and a Sleep Protocol segmented bar that fills 4-of-12 (progress = filled-segment COUNT + position, not the gradient hue — color-safe). Cards stagger in and hover-lift; chevrons nudge on hover; a reconstructed Sleep Regularity section (Overall Consistency 82%) closes the screen. Source: public/ui-lab/sources/sleep-highlights.jpg.
glassy iOS-style step widget — real backdrop-blur glass card, ONE orange accent. A diagonal-HATCH progress bar fills L→R via a single clip-sweep (progress = length + texture, color-safe) with a subtly scrolling hatch that reads as 'active'; a 4,123 Steps count-up beside a drawing-on BPM sparkline with a pulsing end-node; and a km/min/kCal stat row that counts up with a small stagger. Hover-lifts. prefers-reduced-motion snaps. Source: public/ui-lab/sources/walk-widget.jpg.
five supplied mobile layouts — a faithful Absolute Rest report-companion reskin. Select each source-derived screen to compare its stacked cards, week selector, metric sheet, matrix, or single-night instrument. Values are grounded in the existing 92-night wearable fixture; the component distinguishes a descriptive measure from a clinical verdict. Standalone at /ar/sleep-report-reference-lab-v2. A second take alongside the original (#13). Sources: public/ui-lab/sources/ar-sleep-report-reference-01.jpg through -05.jpg.
Absolute Rest · report companion reference
Sleep, in five views.
Five supplied mobile compositions, reskinned with current wearable-report language. The layouts stay intact; the data speaks with the report, not around it.
92-NIGHT WEARABLE FIXTURE · REFERENCE LAB