Cards

Interactive Calendar Cards

by Vanguardia · motionprompts.dev

A column of month cards, each showing a randomized grid of contribution-style pads with a few colored 'active' cells. Clicking an active pad triggers gsap.to to scale it up 20x to flood-fill the card, then reveals an image, title, copy and link that fly in with a staggered elastic.out gsap.fromTo (y and random rotation); a Back button reverses the animation.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.075–2s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: elastic
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, ionicons

click-scaled pad flood-fill (scale 20 in 0.3s, contained by the card's overflow:hidden), then a 2s elastic.out staggered fromTo of 3 content blocks from y:100 with a per-element random rotation (-30..30); Back reverses as a nested chain (fade 0.2s -> unscale 0.3s -> clearProps). No scroll-driven motion at all.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev22,868 chars

# Interactive Calendar Cards — click a grid pad to flood-fill and reveal a card

## Goal
Build a centered column of dark "month" cards on a near-black page. Eac…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.