Animate Try it and Pass exits and deck promotion
Add web/src/discover/motion.ts with the handoff Motion §2, §3, §5 and §6
values over the Web Animations API: the button and Quest log pill bump,
the "Try it!" stamp pop, wiggle and throw right, the Pass page fold with
its shade, the 300 ms deck promotion and the 200 ms reduced-motion fade.
Each exit takes an optional starting transform for the swipe gesture and
returns { finished, cancel }.
DiscoverPage now runs the exit, sends the decision once the card is gone
and keeps input locked until it settles; a refused decision cancels the
exit so the card comes back, and leaving the page mid-exit sends nothing.
The shade uses --color-text (#201e1d).
Maestro task cb7da499-ffda-441d-8574-82e57b332fb6.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -17,7 +17,7 @@ export type DeckCardProps = {
|
||||
// DeckCard is one Side quest in the deck. Only the top card is read out and
|
||||
// reachable; the cards behind it are the stack's edge, kept rendered so they
|
||||
// can be promoted. Its "Try it!" and "Pass" stamps stay hidden until a
|
||||
// decision shows them.
|
||||
// decision shows them, and its shade until Pass folds it (see motion.ts).
|
||||
export function DeckCard({ quest, depth }: DeckCardProps) {
|
||||
const top = depth === 0
|
||||
const titleId = `side-quest-${quest.id}`
|
||||
@@ -38,12 +38,13 @@ export function DeckCard({ quest, depth }: DeckCardProps) {
|
||||
<strong>Why this?</strong> {quest.reason}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`${styles.stamp} ${styles.tryStamp}`} aria-hidden="true">
|
||||
<span className={`${styles.stamp} ${styles.tryStamp}`} data-part="try-stamp" aria-hidden="true">
|
||||
Try it!
|
||||
</span>
|
||||
<span className={`${styles.stamp} ${styles.passStamp}`} aria-hidden="true">
|
||||
Pass
|
||||
</span>
|
||||
<span className={styles.shade} data-part="shade" />
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user