|
|
<script lang="ts">
|
|
|
/**
|
|
|
* Motion demo — the Eidos two-moment motion system.
|
|
|
*
|
|
|
* Shows every surface the system supports today:
|
|
|
* - momento `--state`: the 5 CSS presets (fade / scale-fade / slide-fade /
|
|
|
* slide-full / collapse), driven by `data-animation-style` × `data-state`;
|
|
|
* - momento `--event`: the perceptual FIRMA on `data-event-*` (generic by
|
|
|
* family / intent / event) — the motion channel of a cross-modal signal;
|
|
|
* - the JS `spring` driver (real physics) run via `eidos.motion`;
|
|
|
* - real components (Dialog / Popover / Drawer) now animating THROUGH the
|
|
|
* preset system (their bespoke recipe animations were migrated to it).
|
|
|
*
|
|
|
* Foundation CSS (generated from `EidosConfig.motion`) is imported by the
|
|
|
* layout. Theme + reduced-motion are projected to `documentElement` so they
|
|
|
* also cover the portaled overlays.
|
|
|
*/
|
|
|
import { tick } from 'svelte'
|
|
|
import { ActiveEidos } from '$uix/eidos'
|
|
|
import { rect, spring, waapi } from '$motion'
|
|
|
import { Presence } from '$soma/layers/presence.svelte'
|
|
|
import { PresenceGroup } from '$soma/layers/presence-group'
|
|
|
import { readableActive } from '$libs/reactive'
|
|
|
import { Dialog } from '$uix/eidos/components/dialog'
|
|
|
import { Popover } from '$uix/eidos/components/popover'
|
|
|
import { Drawer } from '$uix/eidos/components/drawer'
|
|
|
import { Toaster, createToaster } from '$uix/eidos/components/toast'
|
|
|
|
|
|
type Side = 'top' | 'right' | 'bottom' | 'left'
|
|
|
const SIDES: Side[] = ['top', 'right', 'bottom', 'left']
|
|
|
|
|
|
let theme = $state<'light' | 'dark'>('light')
|
|
|
let reduced = $state(false)
|
|
|
// F6 — Carbon's productive/expressive motion sets (a `[data-motion-set]` scope).
|
|
|
let motionSet = $state<'productive' | 'expressive'>('productive')
|
|
|
|
|
|
// Per-preview open state (default: open, so each box plays its enter on load).
|
|
|
const opened = $state<Record<string, boolean>>({})
|
|
|
const isOpen = (id: string): boolean => opened[id] !== false
|
|
|
const dataState = (id: string): 'open' | 'closed' => (isOpen(id) ? 'open' : 'closed')
|
|
|
const toggle = (id: string): void => {
|
|
|
opened[id] = !isOpen(id)
|
|
|
}
|
|
|
const toggleMany = (ids: string[]): void => {
|
|
|
const next = !ids.every((id) => isOpen(id))
|
|
|
for (const id of ids) opened[id] = next
|
|
|
}
|
|
|
|
|
|
// Collapse animates to a MEASURED height — the real pattern a component uses.
|
|
|
let collapseHeight = $state(0)
|
|
|
|
|
|
const slideFadeIds = SIDES.map((s) => `slide-fade-${s}`)
|
|
|
const slideFullIds = SIDES.map((s) => `slide-full-${s}`)
|
|
|
const materialPresets = ['shared-axis-x', 'shared-axis-y', 'fade-through']
|
|
|
|
|
|
// P2 — real components driven by the `motion` prop.
|
|
|
const toaster = createToaster({ duration: 4000, max: 4 })
|
|
|
function fireToast(): void {
|
|
|
toaster.create({
|
|
|
title: 'Guardado',
|
|
|
description: 'Tus cambios se han escrito.',
|
|
|
intent: 'neutral'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const eidos = ActiveEidos.require()
|
|
|
|
|
|
// JS `spring` driver — live physics (the mechanical engine). Re-registers with
|
|
|
// the current sliders on each run, then the runtime runs + tracks the handle.
|
|
|
let springBox = $state<HTMLElement>()
|
|
|
let stiffness = $state(180)
|
|
|
let damping = $state(16)
|
|
|
function runSpring(phase: 'enter' | 'exit'): void {
|
|
|
if (!springBox) return
|
|
|
eidos.motion.cancel(springBox)
|
|
|
eidos.motion.register('demo-spring', {
|
|
|
driver: 'spring',
|
|
|
enter: spring({ values: { opacity: [0, 1], scale: [0.4, 1] }, stiffness, damping }),
|
|
|
exit: spring({ values: { opacity: [1, 0], scale: [1, 0.4] }, stiffness, damping })
|
|
|
})
|
|
|
if (phase === 'enter') eidos.motion.enter(springBox, 'demo-spring', { dom: eidos.dom })
|
|
|
else eidos.motion.exit(springBox, 'demo-spring', { dom: eidos.dom })
|
|
|
}
|
|
|
|
|
|
// Event-moment FIRMA — stamp `data-event-*` for a hold to replay the MOTION
|
|
|
// channel of a perceptual signature. Sema fires sound + haptic from the same
|
|
|
// event (cross-modal); they're off here, so this shows the motion channel.
|
|
|
let firmaBox = $state<HTMLElement>()
|
|
|
let firmaFrame: (() => void) | undefined
|
|
|
let firmaDetach: (() => void) | undefined
|
|
|
const FIRMA_ATTRS = ['data-event', 'data-event-family', 'data-event-intent', 'data-event-phase']
|
|
|
const FIRMAS: { label: string; attrs: Record<string, string> }[] = [
|
|
|
{ label: 'present', attrs: { 'data-event': 'present' } },
|
|
|
{ label: 'dismiss', attrs: { 'data-event': 'dismiss' } },
|
|
|
{ label: 'commit', attrs: { 'data-event-family': 'commit' } },
|
|
|
{ label: 'press', attrs: { 'data-event-family': 'contact' } },
|
|
|
{ label: 'announce · neutral', attrs: { 'data-event': 'announce', 'data-event-intent': 'neutral' } },
|
|
|
{ label: 'announce · affirm', attrs: { 'data-event': 'announce', 'data-event-intent': 'affirm' } },
|
|
|
{ label: 'announce · fulfill', attrs: { 'data-event': 'announce', 'data-event-intent': 'fulfill' } },
|
|
|
{ label: 'announce · risk', attrs: { 'data-event': 'announce', 'data-event-intent': 'risk' } },
|
|
|
{ label: 'announce · threat', attrs: { 'data-event': 'announce', 'data-event-intent': 'threat' } }
|
|
|
]
|
|
|
function fireFirma(attrs: Record<string, string>): void {
|
|
|
const el = firmaBox
|
|
|
if (!el) return
|
|
|
firmaFrame?.() // cancel a pending re-trigger frame
|
|
|
firmaDetach?.() // detach a pending animationend listener
|
|
|
for (const k of FIRMA_ATTRS) el.removeAttribute(k)
|
|
|
// Canonical timer surfaces — NOT raw rAF / setTimeout: `dom.raf` re-triggers
|
|
|
// on the next frame (returns a disposer), and `dom.listen('animationend')`
|
|
|
// cleans up when the firma animation ENDS (no magic 1200ms). An app-level
|
|
|
// fixed delay would use the `timers` service, never `window.setTimeout`.
|
|
|
firmaFrame = eidos.dom.raf(() => {
|
|
|
firmaFrame = undefined
|
|
|
for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v)
|
|
|
el.setAttribute('data-event-phase', 'active')
|
|
|
firmaDetach = eidos.dom.listen(el, 'animationend', () => {
|
|
|
firmaDetach?.()
|
|
|
firmaDetach = undefined
|
|
|
for (const k of FIRMA_ATTRS) el.removeAttribute(k)
|
|
|
})
|
|
|
}, el)
|
|
|
}
|
|
|
|
|
|
// Spring-gated Presence — the spring driving a REAL mount/unmount cycle via
|
|
|
// soma's `Presence` (the mechanism every overlay uses internally), wired by
|
|
|
// `motion: eidos.motion`: on close, Presence holds the node until the exit
|
|
|
// spring's `finished` resolves, then unmounts.
|
|
|
eidos.motion.register('panel-spring', {
|
|
|
driver: 'spring',
|
|
|
enter: spring({ values: { opacity: [0, 1], scale: [0.7, 1] }, stiffness: 220, damping: 16 }),
|
|
|
exit: spring({ values: { opacity: [1, 0], scale: [1, 0.7] }, stiffness: 260, damping: 26 })
|
|
|
})
|
|
|
|
|
|
// A JS preset for the REAL Dialog below — its content springs via
|
|
|
// `Presence.motion` (the Dialog provider wires `soma.motion` = `uix.motion`).
|
|
|
eidos.motion.register('dialog-spring', {
|
|
|
driver: 'spring',
|
|
|
enter: spring({ values: { opacity: [0, 1], scale: [0.85, 1] }, stiffness: 240, damping: 20 }),
|
|
|
exit: spring({ values: { opacity: [1, 0], scale: [1, 0.92] }, stiffness: 300, damping: 30 })
|
|
|
})
|
|
|
|
|
|
// Expressive JS presets — dramatic, physical entrances at the genie level.
|
|
|
// `waapi` keyframes (transform/filter) need no per-box CSS; `spring` (elastic)
|
|
|
// overshoots. `eidos.motion.enter(el, name)` plays each on demand; all end at
|
|
|
// the rest state so they settle in place.
|
|
|
eidos.motion.register('genie', {
|
|
|
driver: 'waapi',
|
|
|
enter: waapi(
|
|
|
[
|
|
|
{ transform: 'translateY(70px) scale(0.18)', opacity: 0, filter: 'blur(6px)' },
|
|
|
{ transform: 'none', opacity: 1, filter: 'blur(0)' }
|
|
|
],
|
|
|
{ duration: 650, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
|
|
|
)
|
|
|
})
|
|
|
eidos.motion.register('flip-3d', {
|
|
|
driver: 'waapi',
|
|
|
enter: waapi(
|
|
|
[
|
|
|
{ transform: 'perspective(700px) rotateY(85deg)', opacity: 0 },
|
|
|
{ transform: 'perspective(700px) rotateY(0deg)', opacity: 1 }
|
|
|
],
|
|
|
{ duration: 520, easing: 'cubic-bezier(0.2, 0, 0, 1)' }
|
|
|
)
|
|
|
})
|
|
|
eidos.motion.register('swing', {
|
|
|
driver: 'waapi',
|
|
|
enter: waapi(
|
|
|
[
|
|
|
{ transform: 'rotate(-14deg) translateY(-28px)', opacity: 0, transformOrigin: 'top center' },
|
|
|
{ transform: 'rotate(9deg)', opacity: 1, offset: 0.55, transformOrigin: 'top center' },
|
|
|
{ transform: 'rotate(0deg)', opacity: 1, transformOrigin: 'top center' }
|
|
|
],
|
|
|
{ duration: 820, easing: 'cubic-bezier(0.2, 0, 0.2, 1)' }
|
|
|
)
|
|
|
})
|
|
|
eidos.motion.register('elastic', {
|
|
|
driver: 'spring',
|
|
|
enter: spring({ values: { scale: [0.3, 1], opacity: [0, 1] }, stiffness: 700, damping: 13 })
|
|
|
})
|
|
|
const jsPresets = [
|
|
|
{ name: 'genie', label: 'genie' },
|
|
|
{ name: 'flip-3d', label: 'flip 3D' },
|
|
|
{ name: 'swing', label: 'swing' },
|
|
|
{ name: 'elastic', label: 'elastic' }
|
|
|
]
|
|
|
const jsBoxes = $state<Record<string, HTMLElement | null>>({})
|
|
|
function playJs(name: string): void {
|
|
|
const el = jsBoxes[name]
|
|
|
if (el) eidos.motion.enter(el, name)
|
|
|
}
|
|
|
|
|
|
let panelOpen = $state(false)
|
|
|
let panelEl = $state<HTMLElement | null>(null)
|
|
|
const panelPresence = new Presence({
|
|
|
dom: eidos.dom,
|
|
|
open: readableActive(() => panelOpen),
|
|
|
ref: readableActive(() => panelEl),
|
|
|
motion: eidos.motion
|
|
|
})
|
|
|
|
|
|
// ── PresenceGroup — coordinated list with EXIT retention (RFC §13 prototype) ──
|
|
|
// The motion service end-to-end (M2 enter + M3 exit): a container (owner) and
|
|
|
// its items (children) coordinated by a `PresenceGroup` with `when: 'after'`.
|
|
|
// On CLOSE the items stagger OUT while the container RETAINS its DOM; only when
|
|
|
// their exit aggregates does the container leave, and only then does the tree
|
|
|
// unmount (§8.1). The visual stagger is pure CSS (transition / animation-delay
|
|
|
// × --i); soma only sequences + awaits `getAnimations()` — no JS motion here.
|
|
|
const PG_ITEMS = [0, 1, 2, 3]
|
|
|
let pgOpen = $state(false)
|
|
|
const pgOpenActive = readableActive(() => pgOpen)
|
|
|
const pgGroup = new PresenceGroup({ when: { enter: 'together', exit: 'after' }, dom: eidos.dom })
|
|
|
|
|
|
let pgContainerEl = $state<HTMLElement | null>(null)
|
|
|
const pgContainer = new Presence({
|
|
|
dom: eidos.dom,
|
|
|
open: pgOpenActive,
|
|
|
ref: readableActive(() => pgContainerEl),
|
|
|
group: pgGroup,
|
|
|
groupRole: 'owner'
|
|
|
})
|
|
|
|
|
|
const pgItemEls = $state<Record<number, HTMLElement | null>>({})
|
|
|
const pgItems = PG_ITEMS.map(
|
|
|
(i) =>
|
|
|
new Presence({
|
|
|
dom: eidos.dom,
|
|
|
open: pgOpenActive,
|
|
|
ref: readableActive(() => pgItemEls[i] ?? null),
|
|
|
group: pgGroup,
|
|
|
groupRole: 'child'
|
|
|
})
|
|
|
)
|
|
|
|
|
|
// FLIP — layout transition via the `rect` driver: measure first, mutate the
|
|
|
// layout, then animate the inverse delta. The WAAPI animation is in
|
|
|
// getAnimations(), so it composes with the rest of the system for free.
|
|
|
let flipEl = $state<HTMLElement | null>(null)
|
|
|
let flipBig = $state(false)
|
|
|
let staggerKey = $state(0)
|
|
|
function doFlip(): void {
|
|
|
const el = flipEl
|
|
|
if (!el) return
|
|
|
const first = el.getBoundingClientRect()
|
|
|
flipBig = !flipBig
|
|
|
void tick().then(() => {
|
|
|
eidos.motion.cancel(el)
|
|
|
eidos.motion.register('flip', { driver: 'rect', enter: rect() })
|
|
|
eidos.motion.enter(el, 'flip', { dom: eidos.dom, sourceRect: first })
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// Project theme + reduced-motion onto documentElement so they also cover
|
|
|
// the PORTALED overlays (Dialog / Popover / Drawer / Toast render outside
|
|
|
// `.root`, so a local wrapper attr would not reach them).
|
|
|
$effect(() => {
|
|
|
const el = document.documentElement
|
|
|
el.setAttribute('data-theme', theme)
|
|
|
if (reduced) el.setAttribute('data-motion', 'reduce')
|
|
|
else el.removeAttribute('data-motion')
|
|
|
return () => {
|
|
|
el.removeAttribute('data-theme')
|
|
|
el.removeAttribute('data-motion')
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
|
<title>Motion · Eidos</title>
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap"
|
|
|
/>
|
|
|
</svelte:head>
|
|
|
|
|
|
<div class="root">
|
|
|
<header class="topbar">
|
|
|
<div class="brand">
|
|
|
<strong>Motion</strong>
|
|
|
<small>Eidos · sistema de dos momentos</small>
|
|
|
</div>
|
|
|
<div class="controls">
|
|
|
<div class="seg" role="group" aria-label="Tema">
|
|
|
<button type="button" data-active={theme === 'light'} onclick={() => (theme = 'light')}>
|
|
|
Light
|
|
|
</button>
|
|
|
<button type="button" data-active={theme === 'dark'} onclick={() => (theme = 'dark')}>
|
|
|
Dark
|
|
|
</button>
|
|
|
</div>
|
|
|
<label class="switch">
|
|
|
<input type="checkbox" bind:checked={reduced} />
|
|
|
<span>Reduced motion</span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<main class="canvas">
|
|
|
<p class="lede">
|
|
|
Motion ocurre en <strong>dos momentos</strong>: la transición de <strong>estado</strong>
|
|
|
(<code>data-state</code>, los presets de abajo) y la <strong>firma del evento</strong>
|
|
|
(<code>data-event-*</code>, transitoria y cross-modal). Cada uno puede llevar animación —
|
|
|
uno, el otro o ambos. Todo sale generado desde <code>EidosConfig.motion</code>. Abajo: los 5
|
|
|
presets CSS, la firma del evento, el driver <code>spring</code> (física real) y componentes
|
|
|
reales animando por el sistema.
|
|
|
</p>
|
|
|
|
|
|
<!-- fade -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-animation-style='fade'</span>
|
|
|
<h2>fade</h2>
|
|
|
<p>Opacidad pura. Bajo <em>reduced-motion</em> corre igual (es seguro).</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="stage">
|
|
|
<div class="box" data-animation-style="fade" data-state={dataState('fade')}>fade</div>
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggle('fade')}>Toggle</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-animation-style="fade" data-state="open|closed" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- scale-fade -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-animation-style='scale-fade'</span>
|
|
|
<h2>scale-fade</h2>
|
|
|
<p>
|
|
|
Escala (<code>var(--motion-scale-enter)</code>) + opacidad, con
|
|
|
<code>transform-origin</code>. Bajo <em>reduced-motion</em>: solo fade.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="stage">
|
|
|
<div class="box" data-animation-style="scale-fade" data-state={dataState('scale-fade')}>
|
|
|
scale-fade
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggle('scale-fade')}>Toggle</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-animation-style="scale-fade" data-state="open|closed" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- slide-fade (side-aware) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-animation-style='slide-fade' · data-side</span>
|
|
|
<h2>slide-fade <small>(side-aware)</small></h2>
|
|
|
<p>
|
|
|
Deslizamiento corto + opacidad según <code>data-side</code> (lo emite el motor de
|
|
|
posicionamiento en un Popover real). Bajo <em>reduced-motion</em>: solo fade.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="grid">
|
|
|
{#each SIDES as side}
|
|
|
<div class="stage small">
|
|
|
<div
|
|
|
class="box"
|
|
|
data-animation-style="slide-fade"
|
|
|
data-side={side}
|
|
|
data-state={dataState(`slide-fade-${side}`)}
|
|
|
>
|
|
|
{side}
|
|
|
</div>
|
|
|
</div>
|
|
|
{/each}
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggleMany(slideFadeIds)}>
|
|
|
Toggle todos
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-animation-style="slide-fade" data-side="top" data-state="open|closed" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- slide-full (edge, drawer-like) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-animation-style='slide-full' · data-side</span>
|
|
|
<h2>slide-full <small>(drawer)</small></h2>
|
|
|
<p>
|
|
|
Deslizamiento completo (100%) por borde — para drawers / sheets. Bajo
|
|
|
<em>reduced-motion</em>: instantáneo.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="grid">
|
|
|
{#each SIDES as side}
|
|
|
<div class="stage small clip">
|
|
|
<div
|
|
|
class="panel"
|
|
|
data-animation-style="slide-full"
|
|
|
data-side={side}
|
|
|
data-state={dataState(`slide-full-${side}`)}
|
|
|
>
|
|
|
{side}
|
|
|
</div>
|
|
|
</div>
|
|
|
{/each}
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggleMany(slideFullIds)}>
|
|
|
Toggle todos
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-animation-style="slide-full" data-side="left" data-state="open|closed" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- collapse (measured height) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-animation-style='collapse'</span>
|
|
|
<h2>collapse</h2>
|
|
|
<p>
|
|
|
Altura medida (<code>--height</code>, que pondría el componente). Bajo
|
|
|
<em>reduced-motion</em>: instantáneo.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="stage auto">
|
|
|
<div
|
|
|
class="collapse"
|
|
|
data-animation-style="collapse"
|
|
|
data-state={dataState('collapse')}
|
|
|
style="--height: {collapseHeight}px"
|
|
|
>
|
|
|
<div class="collapse-content" bind:clientHeight={collapseHeight}>
|
|
|
<p>Contenido plegable.</p>
|
|
|
<p>La altura se anima entre 0 y la altura medida del contenido.</p>
|
|
|
<p>El componente (P2) mediría esto y pondría <code>--height</code>.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggle('collapse')}>Toggle</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-animation-style="collapse" data-state="open|closed" style="--height: 160px" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- Event-moment firma — the OTHER moment -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-event-* · firma perceptiva (momento --event)</span>
|
|
|
<h2>firma del evento <small>(transitoria · cross-modal)</small></h2>
|
|
|
<p>
|
|
|
El <strong>otro momento</strong>: el flourish durante el hold de una señal de sema,
|
|
|
genérico por <code>family</code> / <code>intent</code> / <code>event</code> (un
|
|
|
<code>commit</code> asienta igual en todo el sistema). Aquí ves el canal
|
|
|
<strong>motion</strong>; sema dispara además <strong>sonido + háptica</strong> desde el
|
|
|
mismo evento. Bajo <em>reduced-motion</em> el motion se silencia, pero sonido/háptica
|
|
|
siguen comunicando — esa es la ventaja cross-modal.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="stage">
|
|
|
<div class="box firma-box" bind:this={firmaBox}>firma</div>
|
|
|
</div>
|
|
|
<div class="firma-grid">
|
|
|
{#each FIRMAS as f}
|
|
|
<button class="btn sm" type="button" onclick={() => fireFirma(f.attrs)}>{f.label}</button>
|
|
|
{/each}
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-event="announce" data-event-intent="threat" data-event-phase="active" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- JS spring driver — real physics -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">eidos.motion · driver 'spring'</span>
|
|
|
<h2>spring <small>(física real · driver JS)</small></h2>
|
|
|
<p>
|
|
|
Un muelle independiente por propiedad (no una cubic-bezier): <strong>overshoot</strong> y
|
|
|
asentamiento que ninguna curva CSS expresa. Ajusta rigidez / amortiguación y reprodúcelo —
|
|
|
el motor lo corre vía <code>eidos.motion.enter/exit</code> y lo trackea por elemento
|
|
|
(cancelable). Hoy el demo es el consumidor directo; cablearlo a la <code>Presence</code>
|
|
|
de los componentes es el siguiente paso.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="stage">
|
|
|
<div class="box spring-box" bind:this={springBox}>spring</div>
|
|
|
</div>
|
|
|
<div class="sliders">
|
|
|
<label>
|
|
|
Rigidez
|
|
|
<input type="range" min="40" max="400" step="10" bind:value={stiffness} />
|
|
|
<code>{stiffness}</code>
|
|
|
</label>
|
|
|
<label>
|
|
|
Amortiguación
|
|
|
<input type="range" min="4" max="40" step="1" bind:value={damping} />
|
|
|
<code>{damping}</code>
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => runSpring('enter')}>Enter</button>
|
|
|
<button class="btn" type="button" onclick={() => runSpring('exit')}>Exit</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`eidos.motion.register('pop', {
|
|
|
driver: 'spring',
|
|
|
enter: spring({ values: { opacity: [0, 1], scale: [0.4, 1] }, stiffness: ${stiffness}, damping: ${damping} })
|
|
|
})
|
|
|
eidos.motion.enter(el, 'pop', { dom: eidos.dom })`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- Spring-gated Presence — spring driving a real mount/unmount -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">soma Presence · motion → spring</span>
|
|
|
<h2>presence con spring <small>(end-to-end)</small></h2>
|
|
|
<p>
|
|
|
El spring conduciendo un ciclo real de <strong>montaje/desmontaje</strong>. El panel usa
|
|
|
una <code>Presence</code> de soma (el mismo primitivo que todo overlay) con
|
|
|
<code>motion = eidos.motion</code>: al abrir entra con spring; al cerrar, Presence
|
|
|
<strong>retiene el nodo</strong> hasta que el spring de salida termina, y entonces lo
|
|
|
desmonta. El wrapper escribe <code>data-animation-style</code>; el engine de motion lee ese
|
|
|
atributo y corre el preset JS. (En el preview en segundo plano el rAF está congelado; en un
|
|
|
browser enfocado el panel rebota al entrar y se encoge al salir.)
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => (panelOpen = !panelOpen)}>
|
|
|
{panelOpen ? 'Cerrar' : 'Abrir'} panel
|
|
|
</button>
|
|
|
<span class="tag">{panelPresence.isPresent ? 'montado' : 'desmontado'}</span>
|
|
|
</div>
|
|
|
<div class="stage auto">
|
|
|
{#if panelPresence.isPresent}
|
|
|
<div
|
|
|
class="box spring-box"
|
|
|
bind:this={panelEl}
|
|
|
data-animation-style="panel-spring"
|
|
|
{...panelPresence.transitionAttrs}
|
|
|
>
|
|
|
panel (spring presence)
|
|
|
</div>
|
|
|
{/if}
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`const presence = new Presence({ dom, open, ref, motion: eidos.motion })
|
|
|
// panel markup: <div data-animation-style="panel-spring" /> → motion.run runs the spring`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- PresenceGroup — coordinated list with EXIT retention (§13 prototype) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">soma PresenceGroup · when='after' · coordinación de presencia</span>
|
|
|
<h2>presence group <small>(coreografía exit-heavy · retención de DOM)</small></h2>
|
|
|
<p>
|
|
|
El <strong>servicio de motion end-to-end</strong> (M2 enter + M3 exit). Un contenedor
|
|
|
(<code>owner</code>) y sus ítems (<code>child</code>) coordinados por un
|
|
|
<code>PresenceGroup</code> con <code>when='after'</code>. Al <strong>cerrar</strong>, los
|
|
|
ítems salen <strong>en stagger</strong> mientras el contenedor <strong>retiene su DOM</strong>;
|
|
|
solo cuando su salida agrega, el contenedor se va y entonces se desmonta el árbol (§8.1). El
|
|
|
stagger visual es CSS puro (<code>animation-delay × --i</code>); soma solo secuencia y espera
|
|
|
<code>getAnimations()</code>. (En el preview en segundo plano el rAF puede congelarse; enfoca
|
|
|
el browser para ver la coreografía.)
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => (pgOpen = !pgOpen)}>
|
|
|
{pgOpen ? 'Cerrar' : 'Abrir'} lista
|
|
|
</button>
|
|
|
<span class="tag">contenedor: {pgContainer.isPresent ? 'montado' : 'desmontado'}</span>
|
|
|
</div>
|
|
|
<div class="stage auto">
|
|
|
{#if pgContainer.isPresent}
|
|
|
<div class="pg-container" bind:this={pgContainerEl} {...pgContainer.transitionAttrs}>
|
|
|
{#each PG_ITEMS as i (i)}
|
|
|
{#if pgItems[i].isPresent}
|
|
|
<div
|
|
|
class="pg-item"
|
|
|
bind:this={pgItemEls[i]}
|
|
|
style="--i: {i}"
|
|
|
{...pgItems[i].transitionAttrs}
|
|
|
>
|
|
|
item {i + 1}
|
|
|
</div>
|
|
|
{/if}
|
|
|
{/each}
|
|
|
</div>
|
|
|
{/if}
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`const group = new PresenceGroup({ when: 'after', dom })
|
|
|
const container = new Presence({ open, ref, group, groupRole: 'owner' })
|
|
|
const items = [...].map(i => new Presence({ open, ref: itemRef(i), group, groupRole: 'child' }))
|
|
|
// close → items stagger out (container retained) → container exits → unmount`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- FLIP — layout transition via the rect driver -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">eidos.motion · driver 'rect' (FLIP)</span>
|
|
|
<h2>FLIP <small>(transición de layout)</small></h2>
|
|
|
<p>
|
|
|
Transición de <strong>layout</strong>: el bloque cambia de tamaño y el driver
|
|
|
<code>rect</code> mide el rect antes y después y anima el <strong>delta inverso</strong>
|
|
|
(translate + scale) vía WAAPI — la técnica FLIP de Framer. El cambio de layout es
|
|
|
instantáneo; la animación lo hace continuo. (Throttled en el preview en segundo plano.)
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={doFlip}>Flip</button>
|
|
|
</div>
|
|
|
<div class="flip-stage">
|
|
|
<div class="box flip-box" bind:this={flipEl} style="width: {flipBig ? '80%' : '120px'}">
|
|
|
flip
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`const first = el.getBoundingClientRect()
|
|
|
mutateLayout() // size / position changes
|
|
|
await tick()
|
|
|
eidos.motion.enter(el, 'flip', { dom, sourceRect: first })`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- Expressive JS presets — genie & friends -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">eidos.motion.enter · presets JS expresivos</span>
|
|
|
<h2>genie y cía <small>(entradas dramáticas)</small></h2>
|
|
|
<p>
|
|
|
Más presets de driver JS al nivel de <code>genie</code>: warp tipo minimizar
|
|
|
(<code>genie</code>, scale + translate + blur), giro 3D (<code>flip-3d</code>,
|
|
|
<code>rotateY</code>), péndulo (<code>swing</code>) y muelle elástico con overshoot real
|
|
|
(<code>elastic</code>). Pulsa <strong>Play</strong> y el motor corre cada entrada vía
|
|
|
<code>eidos.motion.enter</code>; asientan en su sitio. (En el preview en segundo plano el
|
|
|
rAF está congelado; enfócalo en un browser para verlas.)
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="grid">
|
|
|
{#each jsPresets as p (p.name)}
|
|
|
<div class="stage small">
|
|
|
<button class="btn" type="button" onclick={() => playJs(p.name)}>▶ {p.label}</button>
|
|
|
<div class="box" bind:this={jsBoxes[p.name]}>{p.label}</div>
|
|
|
</div>
|
|
|
{/each}
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`eidos.motion.register('genie', {
|
|
|
driver: 'waapi',
|
|
|
enter: waapi([{ transform: 'translateY(70px) scale(0.18)', opacity: 0, filter: 'blur(6px)' },
|
|
|
{ transform: 'none', opacity: 1, filter: 'blur(0)' }],
|
|
|
{ duration: 650, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' })
|
|
|
})
|
|
|
eidos.motion.enter(boxEl, 'genie') // ▶ play`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- Stagger — Material list choreography (declarative, zero JS) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">--motion-stagger-index × --motion-stagger-each · coreografía</span>
|
|
|
<h2>stagger <small>(Material 3 · list choreography)</small></h2>
|
|
|
<p>
|
|
|
Una lista entra <strong>en secuencia</strong>, sin orquestación JS: el contenedor pone el
|
|
|
ritmo (<code>--motion-stagger-each</code>) y cada ítem su índice
|
|
|
(<code>--motion-stagger-index</code>); el preset retrasa su entrada por
|
|
|
<code>índice × ritmo</code>. El fill <code>backwards</code> mantiene cada ítem en su
|
|
|
estado inicial hasta su turno. Compone con cualquier preset CSS — aquí
|
|
|
<code>slide-fade</code>.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => staggerKey++}>Replay</button>
|
|
|
</div>
|
|
|
<div class="stage auto stagger-stage" style="--motion-stagger-each: 70ms">
|
|
|
{#key staggerKey}
|
|
|
{#each Array(6) as _, i (i)}
|
|
|
<div
|
|
|
class="stagger-item"
|
|
|
data-animation-style="slide-fade"
|
|
|
data-side="bottom"
|
|
|
data-state="open"
|
|
|
style="--motion-stagger-index: {i}"
|
|
|
>
|
|
|
item {i + 1}
|
|
|
</div>
|
|
|
{/each}
|
|
|
{/key}
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<ul style="--motion-stagger-each: 70ms">
|
|
|
{#each items as item, i}
|
|
|
<li data-animation-style="slide-fade" style="--motion-stagger-index: {i}">…</li>
|
|
|
{/each}
|
|
|
</ul>`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- Material transitions — shared-axis + fade-through presets -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">data-animation-style · transiciones Material 3</span>
|
|
|
<h2>shared-axis · fade-through <small>(coreografía)</small></h2>
|
|
|
<p>
|
|
|
Presets de transición Material: <code>shared-axis-x/y</code> (movimiento direccional
|
|
|
coordinado para cambios espaciales / navegacionales) y <code>fade-through</code> (para
|
|
|
contenido sin relación — el entrante escala desde 0.92 + fade, el saliente solo opacidad).
|
|
|
Bajo <em>reduced-motion</em>: solo fade. El <strong>container-transform</strong> ya está
|
|
|
cubierto por el driver <code>rect</code> (FLIP).
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="grid">
|
|
|
{#each materialPresets as p (p)}
|
|
|
<div class="stage small">
|
|
|
<div class="box" data-animation-style={p} data-state={dataState(p)}>{p}</div>
|
|
|
</div>
|
|
|
{/each}
|
|
|
</div>
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggleMany(materialPresets)}>
|
|
|
Toggle todos
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-animation-style="shared-axis-x" data-state="open|closed" />`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- F6 — productive / expressive motion sets (Carbon token rigor) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">[data-motion-set] · sets productive / expressive (F6)</span>
|
|
|
<h2>productive ⇄ expressive <small>(rigor de tokens · Carbon)</small></h2>
|
|
|
<p>
|
|
|
El <strong>mismo</strong> preset (<code>scale-fade</code>), dos personalidades. El set
|
|
|
<strong>productive</strong> (default) usa el easing eficiente; <strong>expressive</strong>
|
|
|
remapea las curvas a las <em>emphasized</em> de Carbon vía un scope
|
|
|
<code>[data-motion-set='expressive']</code> — sin tocar el componente. Las curvas son
|
|
|
tokens: el theme retinta lo perceptualmente fijo, no inventa animaciones. Cambia el set
|
|
|
y abre/cierra para sentir la diferencia.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="demo">
|
|
|
<div class="actions">
|
|
|
<button class="btn" type="button" onclick={() => toggle('motion-set-box')}>
|
|
|
{isOpen('motion-set-box') ? 'Cerrar' : 'Abrir'}
|
|
|
</button>
|
|
|
<button
|
|
|
class="btn"
|
|
|
type="button"
|
|
|
onclick={() => (motionSet = motionSet === 'productive' ? 'expressive' : 'productive')}
|
|
|
>
|
|
|
set: {motionSet}
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="stage" data-motion-set={motionSet === 'expressive' ? 'expressive' : undefined}>
|
|
|
<div
|
|
|
class="box"
|
|
|
data-animation-style="scale-fade"
|
|
|
data-state={dataState('motion-set-box')}
|
|
|
>
|
|
|
{motionSet}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pre class="code">{`<div data-motion-set="expressive"> <!-- scope: remaps --ease-* -->
|
|
|
<div data-animation-style="scale-fade" data-state="open" />
|
|
|
</div>`}</pre>
|
|
|
</section>
|
|
|
|
|
|
<!-- Real components — now animating THROUGH the preset system (momento --state) -->
|
|
|
<section class="preset">
|
|
|
<div class="head">
|
|
|
<span class="eyebrow">Componentes · vía el sistema de presets</span>
|
|
|
<h2>Componentes reales</h2>
|
|
|
<p>
|
|
|
Estos overlays animan <strong>a través del sistema de presets</strong> de arriba —
|
|
|
Dialog → <code>scale-fade</code> + <code>fade</code>, Popover → <code>slide-fade</code>,
|
|
|
Drawer → <code>slide-full</code>. Sus animaciones bespoke se migraron al registro y cada
|
|
|
uno conserva su timing exacto vía <code>--motion-duration/ease</code> por componente. La
|
|
|
<code>Presence</code> de soma espera la animación del preset antes de desmontar. Ábrelos
|
|
|
para verlo (tema + reduced-motion aplican, proyectados a <code>documentElement</code>).
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="components">
|
|
|
<div class="component-card">
|
|
|
<span class="tag">Dialog · spring (JS · motion)</span>
|
|
|
<Dialog>
|
|
|
<Dialog.Trigger class="btn">Abrir dialog</Dialog.Trigger>
|
|
|
<Dialog.Portal>
|
|
|
<Dialog.Overlay />
|
|
|
<Dialog.Content motion="dialog-spring">
|
|
|
<Dialog.Title>Confirmar</Dialog.Title>
|
|
|
<p>
|
|
|
El contenido entra con un <code>spring</code> real (driver JS) — su
|
|
|
<code>Presence</code> corre y espera el muelle vía <code>motion</code>. El
|
|
|
overlay sigue con <code>fade</code> (CSS). Un overlay con nombre brincando.
|
|
|
</p>
|
|
|
<Dialog.Close class="btn">Cerrar</Dialog.Close>
|
|
|
</Dialog.Content>
|
|
|
</Dialog.Portal>
|
|
|
</Dialog>
|
|
|
</div>
|
|
|
|
|
|
<div class="component-card">
|
|
|
<span class="tag">Popover · slide-fade</span>
|
|
|
<Popover>
|
|
|
<Popover.Trigger class="btn">Abrir popover</Popover.Trigger>
|
|
|
<Popover.Portal>
|
|
|
<Popover.Content>
|
|
|
<Popover.Arrow />
|
|
|
<p>Desliza desde el lado según <code>data-side</code>.</p>
|
|
|
<Popover.Close class="btn">Cerrar</Popover.Close>
|
|
|
</Popover.Content>
|
|
|
</Popover.Portal>
|
|
|
</Popover>
|
|
|
</div>
|
|
|
|
|
|
<div class="component-card">
|
|
|
<span class="tag">Drawer · slide-full</span>
|
|
|
<Drawer variant="overlay" direction="right">
|
|
|
<Drawer.Trigger class="btn">Abrir drawer</Drawer.Trigger>
|
|
|
<Drawer.Overlay />
|
|
|
<Drawer.Content>
|
|
|
<Drawer.Title>Panel</Drawer.Title>
|
|
|
<p>Entra deslizando completo desde el borde.</p>
|
|
|
<Drawer.Close class="btn">Cerrar</Drawer.Close>
|
|
|
</Drawer.Content>
|
|
|
</Drawer>
|
|
|
</div>
|
|
|
|
|
|
<div class="component-card">
|
|
|
<span class="tag">Toast · slide-fade</span>
|
|
|
<button class="btn" type="button" onclick={fireToast}>Lanzar toast</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
|
|
|
<Toaster {toaster} position="bottom-right" />
|
|
|
</div>
|
|
|
|
|
|
<style>
|
|
|
.root {
|
|
|
min-height: 100dvh;
|
|
|
background: var(--color-surface-default);
|
|
|
color: var(--color-content-primary);
|
|
|
font-family: var(--font-family-primary, 'Inter', system-ui, sans-serif);
|
|
|
}
|
|
|
|
|
|
.topbar {
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 10;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: var(--space-4);
|
|
|
padding: var(--space-3) var(--space-6);
|
|
|
background: color-mix(in srgb, var(--color-surface-default) 86%, transparent);
|
|
|
backdrop-filter: blur(8px);
|
|
|
border-block-end: 1px solid var(--color-border-subtle);
|
|
|
}
|
|
|
.brand {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
.brand strong {
|
|
|
font-size: var(--font-size-lg);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
.brand small {
|
|
|
color: var(--color-content-muted);
|
|
|
font-size: var(--font-size-xs);
|
|
|
}
|
|
|
.controls {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: var(--space-4);
|
|
|
}
|
|
|
.seg {
|
|
|
display: inline-flex;
|
|
|
padding: 2px;
|
|
|
gap: 2px;
|
|
|
background: var(--color-surface-raised);
|
|
|
border: 1px solid var(--color-border-subtle);
|
|
|
border-radius: var(--radius-lg);
|
|
|
}
|
|
|
.seg button {
|
|
|
appearance: none;
|
|
|
border: 0;
|
|
|
cursor: pointer;
|
|
|
padding: var(--space-1) var(--space-3);
|
|
|
border-radius: var(--radius-md);
|
|
|
background: transparent;
|
|
|
color: var(--color-content-secondary);
|
|
|
font: inherit;
|
|
|
font-size: var(--font-size-sm);
|
|
|
}
|
|
|
.seg button[data-active='true'] {
|
|
|
background: var(--color-primary-solid);
|
|
|
color: var(--color-primary-contrast);
|
|
|
}
|
|
|
.switch {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: var(--space-2);
|
|
|
font-size: var(--font-size-sm);
|
|
|
color: var(--color-content-secondary);
|
|
|
cursor: pointer;
|
|
|
user-select: none;
|
|
|
}
|
|
|
|
|
|
.canvas {
|
|
|
max-width: 880px;
|
|
|
margin-inline: auto;
|
|
|
padding: var(--space-8) var(--space-6) var(--space-12);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-8);
|
|
|
}
|
|
|
.lede {
|
|
|
color: var(--color-content-secondary);
|
|
|
font-size: var(--font-size-md);
|
|
|
line-height: 1.6;
|
|
|
max-width: 64ch;
|
|
|
}
|
|
|
|
|
|
.preset {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-4);
|
|
|
padding: var(--space-6);
|
|
|
background: var(--color-surface-raised);
|
|
|
border: 1px solid var(--color-border-subtle);
|
|
|
border-radius: var(--radius-xl);
|
|
|
}
|
|
|
.head h2 {
|
|
|
margin: var(--space-1) 0 var(--space-2);
|
|
|
font-size: var(--font-size-xl);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
.head h2 small {
|
|
|
font-size: var(--font-size-sm);
|
|
|
font-weight: 500;
|
|
|
color: var(--color-content-muted);
|
|
|
}
|
|
|
.head p {
|
|
|
margin: 0;
|
|
|
color: var(--color-content-secondary);
|
|
|
line-height: 1.55;
|
|
|
max-width: 60ch;
|
|
|
}
|
|
|
.eyebrow {
|
|
|
font-family: var(--font-family-mono, 'Roboto Mono', ui-monospace, monospace);
|
|
|
font-size: var(--font-size-xs);
|
|
|
letter-spacing: 0.02em;
|
|
|
color: var(--color-primary-text, var(--color-content-muted));
|
|
|
}
|
|
|
|
|
|
.demo {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-3);
|
|
|
}
|
|
|
.actions {
|
|
|
display: flex;
|
|
|
gap: var(--space-2);
|
|
|
}
|
|
|
.btn {
|
|
|
appearance: none;
|
|
|
cursor: pointer;
|
|
|
font: inherit;
|
|
|
font-size: var(--font-size-sm);
|
|
|
font-weight: 600;
|
|
|
padding: var(--space-2) var(--space-4);
|
|
|
border-radius: var(--radius-md);
|
|
|
border: 1px solid var(--color-border-default);
|
|
|
background: var(--color-surface-default);
|
|
|
color: var(--color-content-primary);
|
|
|
}
|
|
|
.btn:hover {
|
|
|
background: color-mix(in srgb, var(--color-primary-solid) 8%, var(--color-surface-default));
|
|
|
border-color: var(--color-primary-solid);
|
|
|
}
|
|
|
|
|
|
.stage {
|
|
|
display: grid;
|
|
|
place-items: center;
|
|
|
height: 140px;
|
|
|
border-radius: var(--radius-lg);
|
|
|
background:
|
|
|
repeating-linear-gradient(
|
|
|
45deg,
|
|
|
color-mix(in srgb, var(--color-content-muted) 6%, transparent) 0 8px,
|
|
|
transparent 8px 16px
|
|
|
),
|
|
|
var(--color-surface-default);
|
|
|
border: 1px dashed var(--color-border-subtle);
|
|
|
}
|
|
|
.stage.small {
|
|
|
height: 96px;
|
|
|
}
|
|
|
.stage.clip {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.stage.auto {
|
|
|
height: auto;
|
|
|
min-height: 64px;
|
|
|
align-content: start;
|
|
|
padding: var(--space-3);
|
|
|
}
|
|
|
.grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
gap: var(--space-3);
|
|
|
}
|
|
|
|
|
|
.box {
|
|
|
display: grid;
|
|
|
place-items: center;
|
|
|
min-width: 120px;
|
|
|
padding: var(--space-4) var(--space-5);
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-primary-solid);
|
|
|
color: var(--color-primary-contrast);
|
|
|
font-weight: 600;
|
|
|
font-size: var(--font-size-sm);
|
|
|
box-shadow: var(--shadow-3);
|
|
|
}
|
|
|
.panel {
|
|
|
align-self: stretch;
|
|
|
justify-self: stretch;
|
|
|
display: grid;
|
|
|
place-items: center;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-primary-solid);
|
|
|
color: var(--color-primary-contrast);
|
|
|
font-weight: 600;
|
|
|
font-size: var(--font-size-sm);
|
|
|
}
|
|
|
|
|
|
.collapse {
|
|
|
overflow: hidden;
|
|
|
width: 100%;
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-surface-default);
|
|
|
border: 1px solid var(--color-border-subtle);
|
|
|
}
|
|
|
.collapse-content {
|
|
|
padding: var(--space-4);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-2);
|
|
|
color: var(--color-content-secondary);
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
.collapse-content p {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
code {
|
|
|
font-family: var(--font-family-mono, 'Roboto Mono', ui-monospace, monospace);
|
|
|
font-size: 0.9em;
|
|
|
padding: 0.1em 0.35em;
|
|
|
border-radius: var(--radius-sm);
|
|
|
background: color-mix(in srgb, var(--color-content-muted) 12%, transparent);
|
|
|
}
|
|
|
.code {
|
|
|
margin: 0;
|
|
|
overflow-x: auto;
|
|
|
padding: var(--space-3) var(--space-4);
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-surface-default);
|
|
|
border: 1px solid var(--color-border-subtle);
|
|
|
font-family: var(--font-family-mono, 'Roboto Mono', ui-monospace, monospace);
|
|
|
font-size: var(--font-size-xs);
|
|
|
color: var(--color-content-secondary);
|
|
|
}
|
|
|
|
|
|
.components {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
|
gap: var(--space-3);
|
|
|
}
|
|
|
.component-card {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-3);
|
|
|
align-items: flex-start;
|
|
|
padding: var(--space-4);
|
|
|
border-radius: var(--radius-lg);
|
|
|
background: var(--color-surface-default);
|
|
|
border: 1px dashed var(--color-border-subtle);
|
|
|
}
|
|
|
.tag {
|
|
|
font-family: var(--font-family-mono, 'Roboto Mono', ui-monospace, monospace);
|
|
|
font-size: var(--font-size-xs);
|
|
|
color: var(--color-content-muted);
|
|
|
}
|
|
|
|
|
|
.firma-box {
|
|
|
min-width: 96px;
|
|
|
will-change: transform, opacity, box-shadow;
|
|
|
}
|
|
|
.firma-grid {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: var(--space-2);
|
|
|
}
|
|
|
.btn.sm {
|
|
|
padding: var(--space-1) var(--space-3);
|
|
|
font-size: var(--font-size-xs);
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.spring-box {
|
|
|
min-width: 96px;
|
|
|
will-change: transform, opacity;
|
|
|
}
|
|
|
.sliders {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-2);
|
|
|
font-size: var(--font-size-sm);
|
|
|
color: var(--color-content-secondary);
|
|
|
}
|
|
|
.sliders label {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: var(--space-2);
|
|
|
}
|
|
|
.sliders input[type='range'] {
|
|
|
flex: 1;
|
|
|
max-width: 240px;
|
|
|
accent-color: var(--color-primary-solid);
|
|
|
}
|
|
|
.flip-stage {
|
|
|
padding: var(--space-3);
|
|
|
border: 1px dashed var(--color-border-subtle);
|
|
|
border-radius: var(--radius-lg);
|
|
|
}
|
|
|
.flip-box {
|
|
|
transform-origin: top left;
|
|
|
will-change: transform;
|
|
|
}
|
|
|
.stagger-stage {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-2);
|
|
|
}
|
|
|
.stagger-item {
|
|
|
padding: var(--space-2) var(--space-4);
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-surface-overlay);
|
|
|
border: 1px solid var(--color-border-subtle);
|
|
|
color: var(--color-content-primary);
|
|
|
font-size: var(--font-size-sm);
|
|
|
font-weight: 500;
|
|
|
will-change: transform, opacity;
|
|
|
}
|
|
|
|
|
|
.pg-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--space-2);
|
|
|
width: 100%;
|
|
|
padding: var(--space-3);
|
|
|
border-radius: var(--radius-lg);
|
|
|
background: var(--color-surface-overlay);
|
|
|
border: 1px solid var(--color-border-subtle);
|
|
|
}
|
|
|
.pg-container[data-ending-style] {
|
|
|
animation: pg-container-out 0.3s var(--ease-in, ease) forwards;
|
|
|
}
|
|
|
@keyframes pg-container-out {
|
|
|
to {
|
|
|
opacity: 0;
|
|
|
transform: scale(0.97);
|
|
|
}
|
|
|
}
|
|
|
.pg-item {
|
|
|
padding: var(--space-2) var(--space-4);
|
|
|
border-radius: var(--radius-md);
|
|
|
background: var(--color-primary-solid);
|
|
|
color: var(--color-primary-contrast);
|
|
|
font-size: var(--font-size-sm);
|
|
|
font-weight: 600;
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
transition:
|
|
|
opacity 0.3s ease,
|
|
|
transform 0.3s ease;
|
|
|
transition-delay: calc(var(--i) * 0.06s);
|
|
|
will-change: transform, opacity;
|
|
|
}
|
|
|
.pg-item[data-starting-style] {
|
|
|
opacity: 0;
|
|
|
transform: translateY(10px);
|
|
|
}
|
|
|
.pg-item[data-ending-style] {
|
|
|
animation: pg-item-out 0.35s ease forwards;
|
|
|
animation-delay: calc(var(--i) * 0.08s);
|
|
|
}
|
|
|
@keyframes pg-item-out {
|
|
|
to {
|
|
|
opacity: 0;
|
|
|
transform: translateY(10px);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
