Skip to content

No.68 · Controls· New

Notification Dial

One dial instead of a wall of notification checkboxes, and beside it the consequence: a sample week of what would actually reach you at that setting, counted, spread across the days and listed, changing as you turn it.

The prompt

Copy this text

Automatic copying is unavailable. Copy the selected text using your device’s copy command.

Written for the variant you picked above: Light

Build a notification setting that shows its consequence. The control is a single rotary dial with four detents (Off, Mentions, Important, Everything); the point of the component is the preview next to it, which answers 'what will this actually mean for my week?'. Unlike a plain knob, every turn changes a visible, concrete outcome. Panel: a 16px-radius warm grey panel in Hanken Grotesk; from 44rem the dial column (15rem) sits left of a white preview card, otherwise they stack. Dial (SVG, 200px): a 270° track open at the bottom, 8px thick with round caps, filled in amber from the start up to the current detent; short ticks outside the track at each detent, amber up to the current one; a raised off-white face with a soft drop shadow, the current level's name in bold at its centre, and an amber dot on the face's edge pointing at the setting. Under it, the level names as small pills (the current one tinted amber) and a one-line description ('Mentions, plus reviews you're asked for and deadlines'). Dragging around the dial snaps to the nearest detent as you go; the dead zone at the bottom clamps to the ends. Preview: 'A typical week at this setting' with the count in 34px bold that counts to its new value; a row of seven short day columns (Mon–Sun) where each delivered notification is an 8px dot stacked from the bottom, coloured by source (mentions, reviews, deadlines, activity); then the first six sample notifications as ruled rows (source dot, title, 'Reviews · Tue') and 'and 12 more'. At Off the list is replaced by a dashed note: 'Nothing will reach you. You can still check Masar yourself.' The samples are data: each has the lowest level that delivers it and a day. Selected variant — Light (light): Palette for this theme (Light): --ndial-accent #c96a12; --ndial-bg #f3f1ec; --ndial-card #ffffff; --ndial-face #fbfaf7; --ndial-ink #1f1d1a; --ndial-line rgb(31 29 26 / 0.12); --ndial-muted #6c675e; --ndial-s0 #2f6bd8; --ndial-s1 #c96a12; --ndial-s2 #2b8a5e; --ndial-s3 #8b55c7; --ndial-track #e2ded6. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "light". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Drag the dial, click a level pill, or focus the dial and use ←/→ (or ↑/↓), Home and End. onChange(levelIndex) fires on each new detent. Motion: The count eases to its new value over 360ms; new rows and dots fade and scale in over 220–240ms while remaining rows slide (FLIP). Reduced motion or motion={false} changes everything at once. Accessibility: The dial is role='slider' with aria-valuetext that includes the level, what it means and roughly how many notifications a week it brings. Pills are pointer shortcuts and stay out of the tab order. The sample list is labelled as examples. Responsive behavior: Side by side from 44rem, stacked below; the day columns and list fill the card's width. Touch: Drag the dial with a finger (scrolling is disabled only on the dial) or tap a level pill. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction
Drag the dial, click a level pill, or focus the dial and use ←/→ (or ↑/↓), Home and End. onChange(levelIndex) fires on each new detent.
Motion
The count eases to its new value over 360ms; new rows and dots fade and scale in over 220–240ms while remaining rows slide (FLIP). Reduced motion or motion={false} changes everything at once.
Accessibility
The dial is role='slider' with aria-valuetext that includes the level, what it means and roughly how many notifications a week it brings. Pills are pointer shortcuts and stay out of the tab order. The sample list is labelled as examples.
Responsive
Side by side from 44rem, stacked below; the day columns and list fill the card's width.
On touch
Drag the dial with a finger (scrolling is disabled only on the dial) or tap a level pill.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
86Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.98Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.99Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
102Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.113IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
158Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.164Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
242Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
249Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.259Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
333Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
341Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
363 components