d6ba66f27f
2 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
saravanakumardb1
|
d6ba66f27f |
feat(motion): @bytelyst/motion@0.2.0 — Wave 13.D spatial primitives
Three new primitives that unlock the §3.6 'visionOS-inspired surfaces'
column of v3.1 — and the MAG.1 customer-magnet hero in §9.1.
──────────────────────────────────────────────────────────────────
<Spotlight> · cursor-tracking radial gradient
──────────────────────────────────────────────────────────────────
packages/motion/src/Spotlight.tsx (new)
- Tracks pointer via two CSS custom props (--bl-spot-x/y); zero
React re-renders on move
- color-mix(in srgb, var(--bl-accent) 22%, transparent) default
- prefers-reduced-motion → renders static centred gradient
- data-testid + data-reduced for Playwright + visual review
──────────────────────────────────────────────────────────────────
<Magnetic> · Arc-browser-style pointer attraction wrapper
──────────────────────────────────────────────────────────────────
packages/motion/src/Magnetic.tsx (new)
- Field radius (default 120 px) — child translates toward cursor
only inside that radius, with strength clamp
- window-level pointermove listener so the field works even
before hover
- SPRINGS.snappy transition on release (280 ms)
- reduced-motion → transition: none, no translation
──────────────────────────────────────────────────────────────────
<MeshBackground> · ambient OKLCH gradient
──────────────────────────────────────────────────────────────────
packages/motion/src/MeshBackground.tsx (new)
- 4-stop color-mix() palette (token-driven, sRGB fallback)
- Three mood tiers: calm (24s) · focus (16s) · celebrate (10s)
- Pure CSS keyframes (translate3d + scale) emitted inline
- reduced-motion → renders static blobs (no <style>)
- isolation: isolate so children get their own stacking context
──────────────────────────────────────────────────────────────────
Quality gates
──────────────────────────────────────────────────────────────────
✓ pnpm -F @bytelyst/motion test → 23/23 passing (was 16/16)
+7 new cases: Spotlight (3) · Magnetic (2) · MeshBackground (2)
✓ pnpm -F @bytelyst/motion typecheck → clean
✓ Exports wired in src/index.ts; doc-block bumped to mention
Wave 13.D additions; package.json 0.1.0 → 0.2.0
✓ Description string lists all 8 primitives
──────────────────────────────────────────────────────────────────
Roadmap tracker — 5 boxes flipped (§11)
──────────────────────────────────────────────────────────────────
13.D.2 Spotlight shipped
13.D.3 Magnetic shipped
13.D.4 MeshBackground shipped
13.D.6 spatial-hero showcase (lands in paired showcase commit)
MAG.1 the customer-magnet hero ✨
13.D.1 (Parallax) + 13.D.5 (TiltGallery) explicitly deferred to
motion@0.3.x with notes in the tracker.
Wave 13 Futurism: 0/39 → 5/39 (13%) · TOTAL 14/202 → 19/202 (9%)
Vendored snapshot + showcase /futurism routes land in the paired
showcase commit.
|
||
|
saravanakumardb1
|
d082480849 |
feat(packages): Wave 4 motion + Wave 5b data-viz + Wave 7 notifications-ui
Three new product-agnostic packages unlock visible elegance lifts
across every product:
═══════════════════════════════════════════════════════════════════════
@bytelyst/motion@0.1.0 — Wave 4 elegance primitives (2.21 KB / 8 KB)
═══════════════════════════════════════════════════════════════════════
<Reveal> — IntersectionObserver-based fade/slide entry,
6 directions, configurable spring + delay
<StaggerList> — sequenced reveal of children with per-item delay
<NumberFlow> — RAF-tweened number counter, cubic-out easing,
Intl-formatted, prefers-reduced-motion aware
<TiltCard> — 3D perspective tilt + cursor-tracking glare
overlay (single-element ref, no React rerenders)
<ScrollProgress> — fixed scroll-position bar (window or any element)
Plus exported `SPRINGS` (4 cubic-bezier presets) + `prefersReducedMotion`
helper. Every primitive accepts `disableMotion` for snapshot tests.
═══════════════════════════════════════════════════════════════════════
@bytelyst/data-viz@0.1.0 — Wave 5b viz primitives (2.63 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<Sparkline> — line trend with gradient fill + last-point marker
<BarSparkline> — discrete-bar mini-chart with max-bar highlight
<KpiCard> — label + headline + delta arrow + sparkline; supports
'goodWhen=lower' for latency/cost metrics
<ProgressRing> — circular progress with center content slot,
animated stroke-dashoffset
<Heatmap> — GitHub-style calendar grid with color-mix() intensity
All pure SVG / CSS — zero runtime dependencies.
═══════════════════════════════════════════════════════════════════════
@bytelyst/notifications-ui@0.1.0 — Wave 7 essentials (3.31 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<NotificationCenter> — bell trigger + badge + dropdown panel with
All / Unread / Mentions tabs, outside-click
+ Escape close, mark-all-read action
<InboxItem> — single row with unread dot, kind glyph,
relative timestamp, optional action buttons
<BannerStack> — top-of-page strip with maxVisible + +N more,
accent-bordered tone variants, dismissible
<Announcement> — inline 'What's new' pill (3 tone variants)
5 notification kinds (info/success/warning/danger/mention) + 5 banner
kinds (... + announcement gradient).
═══════════════════════════════════════════════════════════════════════
Quality gates
═══════════════════════════════════════════════════════════════════════
All three packages: tsc --noEmit clean, build clean.
Tests: motion 16/16 · data-viz 14/14 · notifications-ui 17/17
Bundles: motion 2.21 KB · data-viz 2.63 KB · noti-ui 3.31 KB
Budgets: added to .size-limit.cjs (8/10/10 KB respectively)
Refs:
learning_ai_uxui_web/docs/ROADMAP_2026.md
§Wave 4 (Motion), §Wave 5b (Charts), §Wave 7 (Productisation)
Decisions doc §13 (mobile-native = tokens-only) leaves room for these
web-first packages to be the canonical surface
|