Andreas Reinhold / reiniandClaude Fable 5.1
53d362622d
The paragraphs restate the material-3 guideline's rules beside the tokens they govern (plan step 28); the README's AI agents section names the second guideline and skill (step 30). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
40 lines
2.4 KiB
PHP
40 lines
2.4 KiB
PHP
<section id="motion" class="scroll-mt-24 space-y-6" x-data="{ moved: false, figure: 1204 }">
|
|
<h2 class="type-headline-md">Motion</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
M3 Expressive's springs as <code>ease-spatial-*</code> and <code>ease-effects-*</code>, each with its
|
|
<code>--md-sys-motion-*-duration</code>. Reduced motion makes all of them instant.
|
|
</p>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
|
|
Position, size and shape move on the spatial springs, which overshoot — <code>fast</code> for small elements, <code>slow</code> for large ones. Colour and opacity move on the effects springs, which never overshoot. Always pair an easing with its duration; everything that moves goes through these tokens, so reduced motion makes it instant. The Standard scheme (<code>motion.scheme</code>) swaps the spatial springs for a restrained set.
|
|
</p>
|
|
|
|
<button type="button" class="state-layer focus-ring rounded-corner-full bg-primary px-6 py-2.5 type-label-lg text-on-primary" x-on:click="moved = ! moved">
|
|
Move
|
|
</button>
|
|
|
|
<div class="space-y-3 rounded-corner-lg bg-surface-container p-4">
|
|
@foreach (['spatial-fast', 'spatial-default', 'spatial-slow', 'effects-fast', 'effects-default', 'effects-slow'] as $spring)
|
|
<div class="grid grid-cols-[9rem_1fr] items-center gap-4">
|
|
<code class="type-label-md text-on-surface-variant">ease-{{ $spring }}</code>
|
|
<div class="h-8">
|
|
<div
|
|
class="size-8 rounded-corner-full bg-tertiary"
|
|
style="transition: translate var(--md-sys-motion-{{ $spring }}-duration) var(--md-sys-motion-{{ $spring }})"
|
|
x-bind:style="moved && { translate: '16rem' }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-4 rounded-corner-lg bg-surface-container p-4">
|
|
<p class="type-emphasized-display-sm tabular-nums" x-figure x-text="figure.toLocaleString('en') + ' files'">1,204 files</p>
|
|
<button type="button" class="state-layer focus-ring rounded-corner-full px-4 py-2 type-label-lg text-primary" x-on:click="figure = Math.round(Math.random() * 5000)">
|
|
Change the figure
|
|
</button>
|
|
<code class="type-label-md text-on-surface-variant">x-figure</code>
|
|
</div>
|
|
</section>
|