Daily Goal Met
The day's tile turns over from its running total to its completed face.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Daily Goal Met
*
* The day's tile turns over. One face carries the running total, the
* other carries the result, and the tile rotates between them — theAbout this pattern
A target being reached, told as one object showing a different side rather than one card being replaced by another. The tile rotates on its vertical axis while lifting slightly toward the viewer at the halfway point, which gives the turn a pivot instead of a hinge, and the check on the completed face strokes itself in as the face arrives. The rotation spring is damped at nine tenths: a card that wobbles as it lands stops reading as rigid, and rigidity is the only reason to flip a tile instead of crossfading it. Under reduced motion the rotation is dropped entirely and the completed face simply is the face — the result survives, the trick does not.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
Day tiles resolving to a completed state within a week strip.
Related patterns
- Streak AdvanceThe connector reaches today's cell, the cell fills, and the streak count rolls over.
- Team GoalEach person's contribution grows into one shared track in turn until the stack passes the target mark.
- Points EarnA credit chip lifts off the activity that earned it and the balance absorbs it on arrival.