ποΈ 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
γ°οΈ 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
π§· 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.