An open-source, frame-accurate card shuffle animation: live DOM copy, glass material, motion blur, and a synthesized swipe cue. Built for the Appllama MCP prompt deck.
Explore the cards · Copy the prompt · Run locally · Motion · Legal notice
Rendered from this implementation. No third-party screen recordings or stills are redistributed.
Important
Educational reference only. This is an independent Appllama project and is not affiliated with or endorsed by any referenced company. The app icons and client marks are third-party trademarks used to identify their products. Do not ship this deck unchanged. Before any public or commercial use, replace every third-party name, icon, logo, and phrase with your own. Read the full intellectual-property notice.
Animated Card Stack is the card shuffle behind the Appllama MCP page. Cards fan behind the front one, the top card curves off to one side, drops behind the stack, and settles back into the fan while the next card takes the front — with a stereo swipe cue panned to the exit side.
It is not a generic carousel. The choreography is a set of measured tables: four distinct motion slots, each with its own exit arc, peak rotation, z-swap point, blur ramp, and deliberate whole-scene holds, authored in whole 59.94 fps frames against a fixed 1240 × 1240 logical canvas.
You can:
- run the whole page from one Vite dev server;
- swap the deck by editing a single data file;
- paste the prompt below into Codex, Claude Code, Cursor, or another coding agent to rebuild the stack inside your own React or React Native app;
- freeze any card or any mid-transition frame through query parameters; and
- read every measured timing in the motion specification.
The project comes from the product-flow research behind Appllama, a library of onboarding, paywall, and product UI from leading iOS apps.
| Capability | Card ID | Prompt | Source apps |
|---|---|---|---|
| Research | research |
why does duolingo make so much more money than other language apps? | Duolingo, Babbel, Speak |
| Build | build |
build me a home screen like bevel, but for a fasting app | Bevel, Fastic, Zero |
| Fix screens | fix-screens |
can you make this screen feel more like runna? | Runna, Strava, Nike Run Club |
| Onboarding | onboarding |
how is my onboarding different from flo's? | Flo, Stardust, Clue |
| Paywalls | paywalls |
how is my paywall different from duolingo's? | Duolingo, Babbel, Speak |
| Elements | elements |
how does my progress chart compare to mynetdiary's? | MyNetDiary, MyFitnessPal, Lose It! |
| Flows | flows |
show me runna's full flow from install to the first run | Runna, Strava, Nike Run Club |
Every card lives in src/cards.ts. The source
groups are evidence-led rather than decorative: revenue rank for Research,
captured-corpus depth for Build and Fix screens, actual onboarding and paywall
coverage, UI-label breadth for Elements, and flow breadth for Flows.
Use GitHub's copy button and paste the whole thing into a coding agent working inside your own project.
You are working inside my existing repository.
Use https://github.com/Appllama/animated-card-stack as a read-only technical
reference. Add its animated card stack to my app. Do not turn my app into that
demo and do not modify unrelated features.
Reference files:
- src/scene/motion.ts — the four-slot choreography tables
- src/scene/CardStackScene.ts — the runtime that drives the DOM layers
- src/scene/nativeAudio.ts — the synthesized swipe cue
- src/CardStack.tsx — the two-layer card markup
- src/cards.ts — the deck data shape
- src/styles.css — the glass material and card layout
- docs/MOTION_SPEC.md — every measured timing, geometry, and QA hook
Requirements:
1. Before editing, inspect my framework, build tool, package manager, styling
approach, and existing dependencies. If I am on React Native, map the same
tables onto Reanimated worklets, Gesture Handler, expo-blur, and
react-native-svg instead of DOM and CSS.
2. Copy the choreography exactly. Keep the four motion slots, the per-slot exit
sides, peak rotations, z-swap points, blur ramps, and the effective-frame
hold table. Do not replace them with a single easing curve.
3. Keep the two-layer card: a translucent glass surface that carries the
animated gradient, blur, saturation, and accent wash, and a separate content
layer that is never filtered so the copy stays sharp through the motion.
4. Author all timing in whole 59.94 fps frames against a fixed logical canvas,
then project that canvas to whatever size my container is.
5. Drive every card from one data module. Nothing else hardcodes card content.
6. Synthesize the swipe cue at runtime from filtered noise and two oscillators,
panned to the exit side. Do not ship an audio file.
7. Support tap, horizontal drag past a threshold, and keyboard activation.
Honour reduced motion by cutting straight to the next resting state.
Announce the front card through a polite live region and keep off-screen
cards out of the accessibility tree.
8. Expose deterministic QA: render a specific card, freeze a transition at a
given progress, run the loop unattended, and expose ready, animating, and
top-card state.
9. Replace all reference content with my own. Use my copy, my palette, my
category art, and my own icons. Do not copy the Appllama masthead, the app
icons, or the client marks — they are third-party trademarks.
10. Run a type check and a production build, then summarize every file and
dependency you changed.
The deck runs live at anim-card-stack.appllama.io. To run it yourself you need Node 22.13 or newer.
git clone https://github.com/Appllama/animated-card-stack.git
cd animated-card-stack
npm install
npm run devClick the stack, drag it sideways, or focus it and press Enter or Space to advance.
| Route | Result |
|---|---|
/?card=3 |
Render a stable card, no motion |
/?card=3&progress=0.45 |
Freeze a transition mid-flight |
/?autoplay=1 |
Run the loop unattended |
A debug handle is available at window.__cardStack with
advance(), renderCard(n),
renderProgress(t), topCard(), and
ready. The stack element also exposes
data-ready, data-animating, and
data-top-card.
Edit src/cards.ts. The page follows.
export const CARDS = [
{
id: 'research',
title: 'research apps',
prompt: 'why does duolingo make so much more money than other language apps?',
categoryIcon: '/assets/appllama/categories/research.webp',
accentRgb: '174 132 72',
sources: [APPS.duolingo, APPS.babbel, APPS.speak],
},
// ...
]titlerenders lowercase on one line — keep it short.promptis live DOM text. It wraps and re-flows on its own.accentRgbis a space-separatedR G Btriplet driving the header wash and the category bloom.sourcestakes three apps. Their icons overlap in the header and bloom behind the glass.
Any deck of four or more cards works — the four-slot choreography maps across it. Below four, two motion slots would land on the same card.
- Logical canvas: every position is authored in a 1240 × 1240 space, with the card at 704 × 352, then projected through container-query units.
- Four slots, not four cards: card index modulo 4 selects the arc, so a seven-card loop never repeats the same movement twice in a row.
- Measured holds: an effective-frame table freezes the outgoing card, the incoming promotion, the blur state, and the z-order together, staying piecewise linear between frames.
- Material:
materialProgressdrives a five-stop glass gradient, the backdrop blur, and saturation from back-card values to front-card values. - Sharp copy: only the surface layer is blurred. The content layer is never filtered.
- Sound: the cue is built from filtered noise and two oscillators through the Web Audio API, panned to the exit side. No audio file is loaded.
- Backdrop: a single WebGL 2 pass.
Full geometry, timing, and QA surface: MOTION_SPEC.md.
docs/MOTION_SPEC.md Measured geometry, timing, and QA hooks
public/assets/appllama/ Capability art, source-app icons, masthead keycap
public/assets/audio/ Generated swipe cues
public/assets/fonts/ Masthead typefaces
scripts/ Cue synthesis and the GIF pipeline
src/cards.ts The seven cards
src/CardStack.tsx Two-layer card markup
src/ClientRail.tsx Inline client marks
src/SourceIcons.tsx Source-app cluster and its bloom
src/scene/motion.ts The choreography tables
src/scene/CardStackScene.ts WebGL backdrop, DOM writes, autoplay, QA hooks
src/scene/nativeAudio.ts Runtime Web Audio swipe cue
src/remotion/ Capture compositions for the showcase artwork
npm run verifyThe verification command runs TypeScript with tsc -b and a
production Vite build. The same gates run in
GitHub Actions.
The README artwork is rendered from the same choreography tables, so a captured frame matches a live one. None of this is needed to use the deck.
npm run generate:sfx # synthesize the two swipe cues
npm run remotion:studio # preview and scrub every composition
npm run render:brand-square # 3000 × 3000, 60 fps, with the Appllama mark
npm run render:square # 3000 × 3000, 60 fps, 13 s, cards only
npm run render:masthead-4k # 3840 × 3840, 60 fps, with the MCP masthead
npm run render:landscape # 1212 × 676, 60 fps, cards only
npm run render:gif # 1212 × 676 GIF, hard 1 MB budgetThe GIF pass needs ffmpeg and gifsicle on your
PATH.
Paste the copy-paste prompt into a coding agent working inside your project. It points the agent at the exact reference files and tells it to keep the measured choreography while replacing all reference content.
The implementation here is React for the web. The prompt tells an agent to map the same tables onto Reanimated worklets, Gesture Handler, expo-blur, and react-native-svg, which is the intended native path.
Each card is two layers. Only the translucent surface takes the depth and velocity blur; the content layer is never filtered.
No. They are third-party trademarks included for identification in an educational reference. Replace them with your own before any public or commercial use.
Issues and focused pull requests are welcome.
- Keep the deck driven entirely by
src/cards.ts. - Preserve reduced-motion and accessibility behavior.
- Document any timing change in
docs/MOTION_SPEC.md. - Do not submit extracted production artwork or screen recordings from third-party apps.
- Run
npm run verifybefore opening a pull request.
Open an issue or start a pull request.
This is an independent project created by Appllama for education, UI research, and technical demonstration. It is not affiliated with, sponsored by, endorsed by, or authorized by Duolingo, Babbel, Speak, Strava, Bevel, Fastic, Zero, Runna, Nike, Flo, Stardust, Clue, MyNetDiary, MyFitnessPal, Lose It!, Anthropic, Anysphere, OpenAI, GitHub, Codeium, Zed Industries, Google, Apple, or any other referenced company.
Third-party product names, trademarks, service marks, logos, and icons belong to their respective owners. They are referenced only to identify the apps a prompt draws on and the clients this deck is used from. Appllama claims no ownership of, and grants no license to, any third-party intellectual property.
The MIT License applies only to original project code and original material that Appllama is legally able to license. It does not grant permission to use third-party trademarks, copyrighted material, protected trade dress, or other proprietary material.
Do not ship this deck unchanged. Before using it in a public or commercial product, you must:
- replace every third-party name, icon, logo, and piece of copy;
- create your own independently designed colors, typography, and category art;
- remove anything that could imply affiliation, sponsorship, endorsement, or approval by a referenced company; and
- obtain any permissions or legal clearance required for your use and jurisdiction.
Changing only an icon or an accent color may not be sufficient. Calling a use "educational" or "noncommercial," adding attribution, or including this notice does not automatically make the use lawful or qualify it as fair use. Fair use is evaluated case by case.
This notice is informational, is not legal advice, and does not guarantee that any particular use is permitted. If you are uncertain, consult a qualified intellectual-property attorney before publishing or distributing your work. See the full repository notice, the U.S. Copyright Office fair-use guidance, and the USPTO trademark-infringement overview.
Rights holders can request a correction or removal by opening an issue.
Original source code is available under the MIT License, subject to
the third-party rights and exclusions explained above and in
NOTICE.md.
Study the onboarding, paywall, and product flows behind leading iOS apps at appllama.io.
Follow @appllamaio on X · Created by @jaimintf · Star the repository