washiveil

Viewport-fixed tri-color light field the page scrolls over — WebGL glows with per-pixel dither, CSS fallback for first paint, film-grain overlay. Reduced-motion safe.

Taxonomy pill in the tri-color hues (ruri / korozen / sumire) plus a neutral glass register.

Identifier badge for codes and versions — rounded-md mono, distinct from the taxonomy Chip.

Accordion on glass with soft dividers, built on Radix Accordion.

Inline alert on glass — neutral, ruri info, korozen warning, destructive.

Confirmation dialog on strong glass, built on Radix AlertDialog.

Ratio-locked container, built on Radix AspectRatio.

Avatar with a glass ring, built on Radix Avatar.

Breadcrumb trail in the quiet text register.

Pill button in three registers — korozen primary, quiet secondary outline, ruri tinted.

Calendar on the washi ground with ruri selection, built on react-day-picker.

The base translucent surface — blurred white veil on washi in light, lifted warm dark in dark.

Checkbox on glass with a ruri checked state, built on Radix Checkbox.

Show/hide region, built on Radix Collapsible.

Searchable select composed from the command palette inside a popover.

Command palette on strong glass — search, groups, shortcuts. Built on cmdk.

Right-click menu on strong glass — items, checkboxes, radios, submenus. Built on Radix ContextMenu.

Date picker — glass field trigger, calendar in a strong-glass popover.

Modal dialog as a glass veil — blurred translucent panel over a soft scrim, built on Radix Dialog.

Bottom drawer as a rising veil with a grab handle, built on Vaul.

Menu on strong glass — items, labels, separators, shortcuts, submenus. Built on Radix DropdownMenu.

Empty state — icon, title, description, action slot on a soft glass ground.

react-hook-form wiring with the washiveil label and message registers.

Hover card on strong glass, built on Radix HoverCard.

Text input on a translucent glass surface with a ruri focus ring.

One-time-code input on glass cells with a ruri active caret.

Keyboard key cap in the mono register on a faint glass chip.

Form label in the mono uppercase register.

Application menubar on the glass pill with strong-glass dropdowns, built on Radix Menubar.

Floating glass pill navigation — sliding hover pill, scroll-adaptive contrast, masked blur scroll edge, working mobile sheet.

Site navigation with strong-glass flyout panels, built on Radix NavigationMenu.

Pagination pills on the ghost-circle register.

Popover panel on strong glass, built on Radix Popover.

Progress bar with a ruri fill on a glass track, built on Radix Progress.

Radio group on glass with ruri selection dots, built on Radix RadioGroup.

Custom scrollbar as a faint veil, built on Radix ScrollArea.

Select on the glass field register — popover panel on strong glass, built on Radix Select.

Hairline separator on the soft border register, built on Radix Separator.

Side sheet as a veil — slides from any edge over a soft scrim. Built on Radix Dialog.

Loading placeholder — a shimmering veil.

Slider with a ruri range on a glass track, built on Radix Slider.

Toasts as small veils — sonner styled on the washi glass registers.

Loading spinner in the quiet register, reduced-motion safe.

Toggle switch — ruri track when on, glass thumb, built on Radix Switch.

Data table in the washi editorial register — mono uppercase header, soft row dividers.

Pill tab list on a glass ground with a ruri active tab, built on Radix Tabs.

Multiline input on a translucent glass surface with a ruri focus ring.

On-this-page navigation card with active-item highlight.