🎞️
MOTION

Different materials. Shared rhythm.

🎞️ Pencil steps, foam glides, and words arrive when there is room.

SHARED RHYTHM
0:00
🎞️ Different materials. Shared rhythm.
πŸ“–TAP 2 READ ALONG

🎞️ A pencil line can move as though it is being drawn again, while a foam sticker glides smoothly beside it.

🎞️ Watch a tab open: the drawing and emoji travel together, then the words finish their arrival.

🎞️ That shared rhythm makes different materials feel connected.

🎞️ A small reveal can invite curiosity, but the page should settle into something easy to read and use.

TRY THE SAME TABS ✏️

Preview the words. Select to lift the paper. Watch the pencil line meet its new color.

On touch: tap to preview, then tap again to select. Your place in the guide stays here.

Open a filing tab↗️
TAP 2 PLAY
0:00

↗️ An opening tab coordinates stepped drawing, smooth foam, and a late text reveal.

πŸ“– OPEN THE DETAILSCLOSE THE DETAILS+

↗️ Watch the sketch and foam move together.

↗️ The drawing opens in little steps while the emoji glides into position.

↗️ Near the end, the words begin to appear and finish once there is room around them.

↗️ Previewing reveals the name; selecting lifts the paper, making your chosen file clear.

πŸ“ BUILD NOTES & REFERENCES
  1. 🎞️ The sketch expands in discrete frames.
  2. 🎞️ The larger foam emoji glides smoothly throughout that expansion and arrives as the tab reaches its size.
  3. 🎞️ In the last two expansion frames, letters begin writing in.
  4. 🎞️ The remaining letters finish after the tab settles, with readable side padding.

🎞️ Collapsed emojis sit mostly on the tab and peek slightly above it. Expanded width follows the amount of text.

Close & change selection↙️
TAP 2 PLAY
0:00

↙️ Closing and previewing help someone explore without losing their place.

πŸ“– OPEN THE DETAILSCLOSE THE DETAILS+

↙️ First the words erase, then the tab and emoji begin their return together.

↙️ On a desktop, hover reveals another name while the selected file stays open.

↙️ On a phone, tap once to peek at a different file and again to enter.

↙️ When space gets tight, whole files tuck behind their neighbors, so the view stays ordered and readable.

πŸ“ BUILD NOTES & REFERENCES
  1. 🎞️ Letters erase first.
  2. 🎞️ During their last frames, the tab begins to collapse and the emoji starts its return glide.
  3. 🎞️ A selected desktop tab stays open; hover temporarily reveals others.
  4. 🎞️ On mobile, first tap previews a different tab with β€œTAP 2X”; the second enters. The current tab does not require a second entry tap.
Keep the divider alive〰️
TAP 2 PLAY
0:00

〰️ The divider carries attention from the selected file into the surrounding tabs.

πŸ“– OPEN THE DETAILSCLOSE THE DETAILS+

〰️ The pencil line connects to both sides of the selected file.

〰️ As the choice changes, the old stroke erases and the new one draws outward, with paper showing softly between the colors.

〰️ On arrival, the selected file draws first and its neighbors follow the travelling line.

〰️ Keep the notebook and page position steady, so the movement explains the change without losing our place.

πŸ“ BUILD NOTES & REFERENCES

🎞️ The shared pencil line joins the selected tab on both sides and leaves its interior open. New color draws outward while old color erases. Both edges feather into paper white where they meet; the pigments do not overlap. Crowded files keep their size and tuck in order, including their foam stickers. Nearer silhouettes mask the hidden parts of rear files; no white backing is painted. The real page, including its notebook ruling, stays visible through the drawing and fade. Unselected outer contours fade at the bottom into the front divider; the selected outline stays clean and connected. The outgoing joined line keeps its old shape as it erases beneath the incoming file. A tiny stepped lift and settle accompanies selection while the foam continues gliding. On refresh, measure and position files before revealing them. The selected file draws first; the divider travels outward at its steady pace. Each neighboring file waits until the line passes its space, then follows with slightly overlapping strokes and varied drawing directions. Each foam sticker briefly fades at the start, then pops and lands as its own tab is drawn. No sideways setup slide. Rear files retain soft breathing room above the divider so their fading contours are visible. Hover or first-tap preview reveals the letters and moves the foam upward without lifting the paper tab. Only the selected file lifts, and its contour connects fully to the front line. Collapsed stickers sit slightly higher. Only the divider’s far outer ends fade away; selected joins remain clear.

🎞️ Move or subtly redraw the actual stroke. Do not stretch its thickness. Preserve page scroll and fixed notebook-line position.

Small interactions, clear meaning🧷
TAP 2 PLAY
0:00

🧷 Small responses make interaction inviting, with a calm state afterward.

πŸ“– OPEN THE DETAILSCLOSE THE DETAILS+

🧷 A little lift or tilt can show this is something you can explore.

🧷 Foam glides, a pencil mark steps, and a note opens without pushing the page around.

🧷 Give the movement a clear purpose and a calm place to settle.

🧷 The same meaning should remain available with a keyboard or reduced motion.

πŸ“ BUILD NOTES & REFERENCES

🎞️ Foam emoji lift and tilt smoothly toward the viewer. Physical markers may roll. Tape-free post-it info notes tilt individually and fade/pop over the meter without moving the page.

🎞️ Motion is purposeful and user-triggered. Every sequence needs a readable settled state, keyboard access, and reduced-motion behavior. No perpetual bobbing is needed.