motion-visual-lesson

让灵感成真 / Bring Ideas to Life

A 20-second paper-cutout story for OpenDesign: a girl sends “OpenDesign, what can you design?” on a paper plane. The buddy demonstrates interactive prototypes, websites, PPT, posters and motion films. The works fold into a book and return to her: “It starts with your idea.” She hugs it, waves thanks, then pins “What will you design?” beside her window as an invitation to the viewer. example.html is the editable reference — start from it.

Source

A story adaptation of a viral post by @kevin_t_ngo: https://x.com/kevin_t_ngo/status/2102437977435893771 (665K views · 6.2K likes · 3.0K bookmarks on X (as of 2026-10-13)). The composition is inspired by the published piece’s paper craft and rebuilt in code; the soundtrack is original. The original is a 28-second square film; this is a 20-second cut framed in 16:9, and its character is the Open Design buddy built from the logo mark.

Reference files

Copy example.html, assets/gsap.min.js, assets/short-stack-OFL.txt, assets/short-stack-regular.ttf, assets/soundtrack.mp3 into the composition, preserving the assets/ path. Font licenses travel with their fonts. Use these frozen local bytes; no runtime script or font CDN is needed.

Art direction

• Match the reference’s handmade paper craft: uneven torn white fibres, broad directional gouache strokes with dry bristles, and coloured paper layered around the characters. Vary each sheet’s brush angle; avoid a uniform repeated dash pattern or glossy UI styling.
• Night blues #262D70 / #30398A, purple wall #4A3A8A, warm yellow window #F4C443, pink curtains #EE8E96, paper #FFFCF3, blue pen #3B62B5, red pencil #D8443A.
• The girl has a brown bob, yellow clip, separate paper eyes, painted teal sweater and pointed white collar. Head, upper arm, forearm and hand articulate separately; paper texture stays attached to each piece.
• The OpenDesign buddy retains its dark logo tile, white ring and green cursor. Give it short, plump paper mittens with rounded ends, each drawn as one soft piece. Keep shoulder-to-hand reach below one third of its body width; no thin segmented arms or tiny dot hands. Move or tilt the whole buddy toward a prop so the hand really touches it: lean in to tap, float beside the tape, and tuck behind the book to hold it close.
• Use Short Stack (SIL OFL, bundled) for English hand lettering. Preserve the source’s intimate central composition while extending walls and sky into 16:9.
• Give each capability a recognisable designed output and its own action. Use object-led cuts, hinges, creases, hand contact and overlap, with short anticipation and a readable hold.
• Keep capability labels clear of the buddy throughout each entrance and action. Give the prototype tap and PPT page turn enough time for both the action and its result to read.
• Start the collecting book with empty page slots. Move the five works into their own slots one at a time; each thumbnail appears only when its work lands. Close the cover after all five have arrived.
• Keep the reply physically continuous through its fold, flight and opening. The girl catches it at chest height with both hands; the incoming book must leave her eyes and expression visible.
• Make the final lined invitation note large enough to read at gallery-preview size. Raise and pin it beside the girl, keep her hand in contact until release, then hold the complete “What will you design?” while she brings her hands together. This is the audience's question.