yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

Fix specimen scroll motion
Some checks failed
ci / build (push) Failing after 11m40s
Details

Browse source
This commit is contained in:
Yun Chan 2026-08-30 19:08:52 +09:00
parent 7ef9106723
commit 5953c97cf6
3 changed files with 344 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

94
apps/site/src/components/OutputSpecimens.astro
View file

@ -434,13 +434,13 @@ const copy = lang === "en"
}
@supports (animation-timeline: view()) {
.specimen-direction {
view-timeline-name: --direction-specimen;
.direction-stage {
view-timeline-name: --direction-stage;
view-timeline-axis: block;
}
.specimen-tokens {
view-timeline-name: --tokens-specimen;
.type-stage {
view-timeline-name: --type-stage;
view-timeline-axis: block;
}
@ -452,44 +452,68 @@ const copy = lang === "en"
@media (prefers-reduced-motion: no-preference) {
.direction-field-inner {
animation: direction-plane-in linear both;
animation-timeline: --direction-specimen;
animation-range: entry 8% cover 30%;
animation-timeline: --direction-stage;
animation-range: entry 32% cover 58%;
transform-box: fill-box;
transform-origin: center;
}
.direction-vector,
.direction-vector {
animation: direction-vector-in linear both;
animation-timeline: --direction-stage;
animation-range: entry 64% cover 64%;
transform-box: fill-box;
transform-origin: left center;
}
.direction-node {
--direction-shift-x: calc(var(--space-3) * -1);
animation: direction-lock linear both;
animation-timeline: --direction-specimen;
animation-range: entry 18% cover 38%;
animation: direction-node-in linear both;
animation-timeline: --direction-stage;
transform-box: fill-box;
transform-origin: center;
}
.direction-node:nth-of-type(1) {
--direction-node-x: calc(var(--space-5) * -1);
--direction-node-y: var(--space-4);
animation-range: entry 64% cover 58%;
}
.direction-node:nth-of-type(2) {
--direction-node-x: 0px;
--direction-node-y: var(--space-5);
animation-range: entry 88% cover 66%;
}
.direction-node:nth-of-type(3) {
--direction-node-x: var(--space-5);
--direction-node-y: calc(var(--space-4) * -1);
animation-range: entry 72% cover 68%;
}
.type-glyphs {
animation: type-register linear both;
animation-timeline: --tokens-specimen;
animation-range: entry 8% cover 27%;
animation-timeline: --type-stage;
animation-range: entry 12% cover 58%;
transform-origin: left bottom;
}
.token-sample {
animation: token-resolve linear both;
animation-timeline: --tokens-specimen;
animation-timeline: --type-stage;
transform-origin: left center;
}
.token-register > div:nth-child(1) .token-sample {
animation-range: entry 22% cover 34%;
animation-range: entry 60% cover 58%;
}
.token-register > div:nth-child(2) .token-sample {
animation-range: entry 26% cover 38%;
animation-range: entry 72% cover 64%;
}
.token-register > div:nth-child(3) .token-sample {
animation-range: entry 30% cover 42%;
animation-range: entry 84% cover 70%;
}
.viewport {
@ -537,22 +561,27 @@ const copy = lang === "en"
}
@keyframes direction-plane-in {
from { opacity: 0.42; translate: 0 var(--space-3); }
to { opacity: 1; translate: 0 0; }
from { opacity: 0.72; translate: 0 var(--space-5); scale: 0.92 0.92; }
to { opacity: 1; translate: 0 0; scale: 1 1; }
}
@keyframes direction-lock {
from { opacity: 0; translate: var(--direction-shift-x) var(--space-1); }
to { opacity: 1; translate: 0 0; }
@keyframes direction-vector-in {
from { opacity: 0.08; translate: calc(var(--space-2) * -1) var(--space-1); scale: 0.12 1; }
to { opacity: 1; translate: 0 0; scale: 1 1; }
}
@keyframes direction-node-in {
from { opacity: 0.08; translate: var(--direction-node-x) var(--direction-node-y); scale: 0.35 0.35; }
to { opacity: 1; translate: 0 0; scale: 1 1; }
}
@keyframes type-register {
from { opacity: 0.35; translate: 0 var(--space-3); }
to { opacity: 1; translate: 0 0; }
from { translate: 0 var(--space-5); scale: 0.92 0.92; }
to { translate: 0 0; scale: 1 1; }
}
@keyframes token-resolve {
from { opacity: 0.35; scale: 0.18 1; }
from { opacity: 0.18; scale: 0.04 1; }
to { opacity: 1; scale: 1 1; }
}
@ -586,9 +615,18 @@ const copy = lang === "en"
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.direction-vector,
.direction-node {
--direction-shift-x: calc(var(--space-2) * -1);
.direction-node:nth-of-type(1) {
--direction-node-x: calc(var(--space-4) * -1);
--direction-node-y: var(--space-3);
}
.direction-node:nth-of-type(2) {
--direction-node-y: var(--space-4);
}
.direction-node:nth-of-type(3) {
--direction-node-x: var(--space-4);
--direction-node-y: calc(var(--space-3) * -1);
}
.viewport-narrow {