Opus 5.5Motion design

Showreel 2026 · Motion designer

Opus 5.5

חמישים וחמש יצירות של Motion Graphics, מאותיות שקופצות על הביט ועד סימולציות פיזיקליות, סצנות תלת-ממד וויזואלייזר. אין בעמוד הזה אף קובץ וידאו. כל פריים מצויר מקוד בדפדפן שלכם, אז אפשר לגלול בכל יצירה, לעבור בה פריים אחרי פריים, או להריץ אותה אחורה.

Fifty-five pieces of motion design, from kinetic type and physics simulations to Three.js scenes and an audio visualizer. There is no video on this page: every frame is drawn live by code in your browser, so you can scrub any piece, step through it frame by frame, or play it backwards.

Runtimeמשך
3:40
Piecesיצירות
55
Video filesקבצי וידאו
0
HTML fileקובץ HTML
281 KB
Open the full showreel ↗
00:00:00:00TC · 24 FPS
01

Academy Leader

Retro

▶ 1×

Make your own

Every piece below comes with its prompt. Paste it into Claude with Opus 5.5 and you get the same style as one HTML file, which you can then change in plain language.

  1. Pick a piece in the index and open Prompt to copy it.
  2. Start a conversation with Claude and choose Opus 5.5. Paste the base prompt first, then the piece's prompt right after it.
  3. Claude returns a single HTML file. Open it right in the conversation, or save it and open it in a browser.
  4. Change it in plain language, like “replace the text with my business name”, “make it half as fast” or “use my brand colours”.
  5. When it's ready, ask Claude to add a button that downloads the animation as a video file.
The base prompt, paste it before any style
Build this as one self-contained HTML file with a single 1920 × 1080 canvas that scales to fit the window. Draw every frame as a pure function of time t in seconds, so the animation can be paused, scrubbed and played backwards. Make it 4 seconds long and loop it, add play/pause and a scrub bar, respect prefers-reduced-motion, and use no video or image files. Google Fonts are fine, and if the style needs 3D, load Three.js from cdnjs.

Better results

  • Call each move by its professional name. “An entrance with expo.out easing” is far more precise than “make it come in nicely”.
  • Set a duration and a pace. Four seconds at 30 frames per second is a good starting point.
  • Ask for every frame to be computed from time. Then you can pause, play backwards and turn it into a video without surprises.
  • Change one thing at a time. When you ask for five changes at once, it's hard to tell which one broke what.

צרו משלכם

לכל יצירה כאן יש פרומפט מוכן. מדביקים אותו בשיחה עם Claude על Opus 5.5 ומקבלים את אותו סגנון כקובץ HTML אחד, שאפשר לשנות בשפה פשוטה.

  1. בחרו יצירה ברשימה למטה ופתחו את Prompt כדי להעתיק אותו.
  2. פתחו שיחה עם Claude ובחרו במודל Opus 5.5. הדביקו קודם את פרומפט הבסיס, ומיד אחריו את הפרומפט של היצירה.
  3. Claude יחזיר קובץ HTML אחד. אפשר לפתוח אותו ישירות בשיחה, או לשמור אותו ולפתוח בדפדפן.
  4. משנים בשפה פשוטה, כמו ״תחליף את הטקסט לשם של העסק שלי״, ״תאט את זה בחצי״ או ״תשתמש בצבעים של המותג שלי״.
  5. כשזה מוכן, בקשו מ-Claude להוסיף כפתור שמוריד את האנימציה כקובץ וידאו.
פרומפט הבסיס, מדביקים אותו לפני כל סגנון
Build this as one self-contained HTML file with a single 1920 × 1080 canvas that scales to fit the window. Draw every frame as a pure function of time t in seconds, so the animation can be paused, scrubbed and played backwards. Make it 4 seconds long and loop it, add play/pause and a scrub bar, respect prefers-reduced-motion, and use no video or image files. Google Fonts are fine, and if the style needs 3D, load Three.js from cdnjs.

איך מקבלים תוצאה טובה יותר

  • קראו לכל דבר בשם המקצועי שלו. ״כניסה עם expo.out״ מדויק הרבה יותר מ״שייכנס יפה״.
  • קבעו משך וקצב. ארבע שניות ב-30 פריימים לשנייה זו נקודת פתיחה טובה.
  • בקשו שכל פריים יחושב מתוך הזמן. ככה אפשר לעצור, להריץ אחורה ולהפוך לסרטון בלי הפתעות.
  • שנו דבר אחד בכל פעם. כשמבקשים חמישה שינויים ביחד, קשה לדעת מה שבר מה.

הפרומפטים באנגלית, כי רוב המונחים של עולם האנימציה באים מאנגלית ו-Claude מכיר אותם היטב. את השיחה עצמה אפשר להמשיך בעברית.

Index55 pieces

כל תצוגה מקדימה היא אותה תוכנה שרצה ב-Showreel. העבירו את העכבר על תצוגה כדי לגלול בה, לחצו כדי לראות אותה ב-Showreel, או פתחו את הפרומפט כדי להעתיק אותו.

Each preview is the same program the reel runs. Move the pointer across a preview to scrub it, select it to watch it in the reel, or open Prompt to copy the brief that makes it.

Curves

התזמון שמאחורי ה-Showreel. שש עקומות ההאטה (easing) האלה מזיזות כמעט כל דבר כאן. הזמן רץ משמאל לימין והערך עולה למעלה, כמו בעורך גרפים. כדאי לכתוב את שם העקומה בפרומפט.

The timing behind the reel. These six easing curves carry almost every move above, drawn the way a graph editor shows them: time runs left to right, value runs up.

Résumé

מה ה-Showreel הזה מדגים, ובאילו כלים הוא נבנה.

What this reel demonstrates, and how it was made.

Disciplines

Kinetic typography
Words cut to the beat, with scale, stretch, echo frames, masked rises, marquees and a variable font swept from 100 to 900.
Generative systems
Particles that assemble into letters, a Perlin flow field, growing trees, Voronoi cells, mazes, a Mandelbrot dive and fractal noise warped three layers deep.
Simulation
Boids, Verlet cloth and ropes, reaction-diffusion, fire and rain, baked into frame caches so they scrub like keyframed work.
3D, with and without an engine
2:1 dimetric cities, a hypercube projected by hand, raymarched SDFs, and Three.js turntables, lit scenes, galaxies and fly-throughs.
Graphic design in motion
Swiss grids, riso halftone screens, op-art moiré, blueprint construction and stop-motion paper that boils on twos.
Maps & data
Route maps, hex choropleths, a bar chart race and an org chart, the last two built from this reel’s own data.
Character & explainer
A forward-kinematics character rig, an icon explainer and die-cut stickers with spring timing.
Broadcast & product
Lower thirds inside title safe, a live bug and ticker, a departures board, and UI flows annotated with their specs.
Animation principles
Squash and stretch, arcs, slow in and slow out, onion skins and spacing charts, all shown working rather than described.
Sound to picture
A 120 BPM score synthesised live, every cut on a downbeat and a 1 kHz two-pop on the leader.

Toolkit

  • Canvas 2D45 pieces
  • WebGL fragment shaders6 pieces
  • Three.js r1284 pieces
  • Web Audio APIScore & two-pop
  • Hand-written easing, noise & physicsFrom scratch
  • One HTML file281 KB

Not used

  • Video files0 bytes
  • Images or sprites0 bytes
  • Animation librariesNone loaded
  • After EffectsNever opened

תחומים

אותיות בתנועה
מילים שנחתכות לפי הביט, עם הגדלה, מתיחה, שובל, כניסה מתוך מסכה, פס טקסט רץ וגופן שהעובי שלו עובר מ-100 ל-900.
מערכות גנרטיביות
חלקיקים שמתיישבים לתוך אותיות, שדה זרימה, עצים שצומחים, תאים, מבוכים, צלילה לתוך פרקטל ורעש שמתעוות שלוש שכבות לעומק.
סימולציות
להקת ציפורים, בד וחבלים, תגובה כימית, אש וגשם. כל סימולציה מחושבת מראש לפריימים, ולכן אפשר לגלול בה כמו באנימציה רגילה.
תלת-ממד, עם מנוע ובלי
ערים איזומטריות, קובייה ארבע-ממדית שמוטלת על המסך בחישוב ידני, צורות רכות שמחושבות בכרטיס המסך, וסצנות ב-Three.js של מוצר, גלקסיה וטיסת מצלמה.
עיצוב גרפי בתנועה
רשת שווייצרית, הדפס ריזו, אמנות אופטית, שרטוט טכני ונייר בסטופ-מושן.
מפות ונתונים
מפת ניווט, מפת משושים, מרוץ עמודות ותרשים ארגוני. שני האחרונים בנויים מהנתונים של ה-Showreel עצמו.
דמויות והסברים
דמות עם שלד, סרטון הסבר באייקונים ומדבקות שקופצות פנימה.
שידור ומוצר
כותרות תחתונות בתוך השוליים הבטוחים, תווית LIVE ופס מבזקים, לוח המראות ואנימציה של אפליקציה עם הערות למפתח.
עקרונות האנימציה
מעיכה ומתיחה, קשתות, האטה בכניסה וביציאה, שכבות בצל וטבלת מרווחים. לא מסבירים אותם, מראים אותם עובדים.
סאונד לתמונה
מוזיקה בקצב 120 שנוצרת בדפדפן, כל חיתוך נופל על הביט וצפצוף סנכרון בספירה לאחור.

במה השתמשנו

  • Canvas 2D45 יצירות
  • שיידרים ב-WebGL6 יצירות
  • Three.js r1284 יצירות
  • Web Audioמוזיקה וצפצוף סנכרון
  • קובץ HTML אחד281 KB

במה לא השתמשנו

  • קבצי וידאואפס
  • תמונותאפס
  • ספריות אנימציהאף אחת
  • After Effectsלא נפתח