Eleven gamified-learning interaction motifs: match-and-stamp, fly-in word chips, chest openings, combo bursts, idle path — all rebuilt as pure-CSS loops. Click any card to replay.
Eleven interaction motifs extracted from the real Duolingo app, each rebuilt as a portrait phone screen running pure-CSS keyframe loops. Click any card for the motif detail and copy its prompt for AI to recreate 1:1.
9:41
Tap the matching pairs
ricegohan水please
CHECK
PERFECT!
Matching · select → match → stamp
Matching · select → match → stampTap two word tiles: blue selected state, green flash with particles on match, then an orange PERFECT stamp lands.
9:41
Build the sentence
kore warice。
ochadesu
CHECK
Word bank · fly into slot
Word bank · fly into slotA tapped chip flies along an arc into the answer row, leaving a ghost in the tray; CHECK arms from gray to green.
9:41
COMMONRAREEPICMEGA
+115
Tap to upgrade
Chest upgrade · rarity color morph
Chest upgrade · rarity color morphEach tap raises rarity: COMMON→RARE→EPIC→MEGA repaints the screen, the chest shakes open, gems burst with a count-up.
9:41
gakushuu · studyhito · personisha · doctor
SortAlphabetically✓Recently learned✓
Sort sheet · slide-up + reorder
Sort sheet · slide-up + reorderSheet slides up over a dimmed backdrop; the chosen row gets a check, the sheet leaves, and list rows swap positions.
9:41
Hi there! I'm Sprout 🌱
CONTINUE
Mascot intro · typing bubble
Mascot intro · typing bubbleMascot hops in, the chat bubble shows typing dots then expands, and the primary button arms from disabled gray to brand green.
9:41
Pick a streak goal
7 days+5014 days+10030 days+250
Start a streak+1
Streak commit · option + progress
Streak commit · option + progressSingle-select highlight in a list, commit button slides in; the quest bar fills left to right with a +1 badge pop.
9:41
Japanese⌄◆ 120
SpanishFrenchGermanItalian
Course switcher · top dropdown
Course switcher · top dropdownTapping the flag pill expands a panel from the top edge; rows stagger in upward while the background dims.
9:41
★
Order food & drinksLesson 3 of 4
Node popover · anchored pop
Node popover · anchored popTapping a path node pops a green lesson card from the node itself (transform-origin at the pointer), with a START button.
9:41
2xLevel up! Double XP for 15 min
Reward loading · circle reveal
Reward loading · circle revealA spinner collapses into a chest, a purple circle wipe fills the screen, bubbles drift up, the 2x badge pops in.
9:41
★🐾🎒
Path idle · breathe & pulse
Path idle · breathe & pulseAmbient idle motion: pulsing START ring, nodes bobbing out of phase, a gently swaying flag — the screen stays alive.
9:41
Perfect lesson!
TOTAL XP⚡051015TIME⏱ 0:48ACCURACY✓ 100%
CONTINUE
Lesson complete · staggered rewards
Lesson complete · staggered rewardsTitle pops, reward chips drop in one by one with rolling counters, sparkle accents, CONTINUE slides up from the bottom.