Skip to content

Rebuild the example site as a bleeding-edge dwind/dominator showcase - #21

Merged
JedimEmO merged 1 commit into
mainfrom
modernize-example-app
Jul 25, 2026
Merged

Rebuild the example site as a bleeding-edge dwind/dominator showcase#21
JedimEmO merged 1 commit into
mainfrom
modernize-example-app

Conversation

@JedimEmO

Copy link
Copy Markdown
Owner

The docs site was a competent dark landing page, but it demonstrated almost nothing that DOMINATOR can do beyond static markup. This turns it into an argument for the stack.

The through-line

Every effect added here is a Mutable written by an event and read by a style_signal. No animation library, no requestAnimationFrame loop, no re-render — an event writes a number and DOMINATOR writes exactly the properties that depend on it.

// fx.rs — the whole spotlight, minus bookkeeping
.event(move |e: events::PointerMove| {
    pos.set_neq(normalised(&element, e.mouse_x() as f64, e.mouse_y() as f64));
})
.style_signal("--sx", pos.signal().map(|(x, _)| format!("{:.2}%", x * 100.0)))

What's new

Module What it adds
fx.rs Pointer spotlight + 3D tilt, magnetic controls, drifting aurora field, film grain, blueprint grid, scroll-spy, marquee, word-stagger kinetic headlines
palette.rs ⌘K command palette — fuzzy search over every route with word-start scoring, full keyboard control, glass panel
pages/signal_lab.rs The new home-page centrepiece: four Mutables fan a card stack while a live code panel regenerates the Rust behind it
styles.rs App-level keyframes, glass surfaces, grain and masks — pulled out of the old inline APP_KEYFRAMES const

The reactivity lab is the honest version of the pitch: it counts actual property writes next to a re-render count that stays at zero. Dragging a slider measured 10 → 75 property writes, 0 re-renders.

The shell gains a scroll-progress rail, route transitions with scroll reset, and an active-route indicator that grows in. Docs gain a sticky glass sidebar with a search affordance, breadcrumb mastheads, gradient section rules, and prev/next pagers. The utility showcase gains a scroll-spy chapter rail.

The palette is reachable from the header chip, the docs sidebar search box, ⌘K/Ctrl+K, or /.

Two real bugs fixed on the way

  • The hero used @lg:, which is 1920px in dwind, so it stacked into a single column on every normal desktop. It wants @md: (1280px).
  • The palette's entrance animation used fill-mode both, which silently overrode the inline transform that centred it — the panel sat right-of-centre. Centring moved to a wrapper node so the keyframes own transform alone.

Verification

Driven in real Chrome via playwright-core:

  • All 19 routes render with zero console errors
  • No horizontal overflow at 1440px or 390px
  • prefers-reduced-motion honoured — marquee, sheen, tilt and reveal all stop, and kinetic words sit at opacity 1
  • Palette verified end to end: opens on Ctrl+K, trans ranks Transforms above dwind on crates.io, arrows/enter navigate, escape dismisses
  • Spotlight tracking verified live (--sx: 24.83%, data-hot: 1, rotateX(1.61deg) rotateY(-2.01deg))
  • cargo fmt clean, no new clippy warnings

🤖 Generated with Claude Code

The docs site was a competent dark landing page, but it demonstrated
almost nothing that dominator can do beyond static markup. This turns it
into an argument for the stack.

Every effect added here is a Mutable written by an event and read by a
style_signal — no animation library, no rAF loop, no re-render:

- fx.rs: pointer spotlight and 3D tilt, magnetic controls, drifting
  aurora field, film grain, blueprint grid, scroll-spy, marquee, and
  word-stagger kinetic headlines.
- palette.rs: a ⌘K command palette with fuzzy search over every route,
  word-start scoring, and full keyboard control. Reachable from the
  header chip, the docs sidebar, ⌘K/Ctrl+K, or "/".
- pages/signal_lab.rs: the new home-page centrepiece. Four Mutables fan
  a card stack while a live code panel regenerates the Rust behind it,
  next to a counter that measures actual property writes against zero
  re-renders.
- styles.rs: app-level keyframes, glass surfaces, grain and masks,
  pulled out of the old inline APP_KEYFRAMES const.

The shell gains a scroll-progress rail, route transitions with scroll
reset, and an active-route indicator that grows in. Docs gain a sticky
glass sidebar with a search affordance, breadcrumb mastheads, gradient
section rules, and prev/next pagers; the utility showcase gains a
scroll-spy chapter rail.

Two real bugs fixed on the way:

- The hero used @lg:, which is 1920px in dwind, so it stacked on every
  normal desktop. It wants @md:.
- The palette's entrance animation used fill-mode "both", which silently
  overrode the inline transform centring it. Centring moved to a
  wrapper node.

Verified in Chrome: all 19 routes render with no console errors, no
horizontal overflow at 1440px or 390px, prefers-reduced-motion honoured,
and a slider drag in the lab measured 10 -> 75 property writes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@JedimEmO
JedimEmO merged commit 7b25da5 into main Jul 25, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant