Talk · Online · 2026-10-24 (Asia/Taipei)

AI-assisted brand motion: workshop notes

From brand personality and storyboards to AI workflows, web effects, media performance and session Q&A.

Key takeaway

Start with the information and interaction that motion should explain, then choose timing and tools. Easing curves, physical models and drawing libraries serve different responsibilities.

Follow the session: from an idea to a finished piece

The chapters follow the teaching sequence in the recording. Each gives the session context, a plain-language explanation and a small exercise. Times are relative to the recording. Material and documentation supplements appear within the notes, with links collected at the end.

Relative recording time 00:00:12–00:03:12

01 · Choose the medium and the message

Session context — The opening asks where motion will appear. A website, app and explainer each give the viewer a different job, which shapes the visual focus.

Notes with material and documentation supplements

Website intros establish a first impression; scroll reveals pace a story; loading states, transitions and notifications explain app state; product explainers condense a workflow into a readable sequence. Give each moment one focal point, then coordinate attention, rhythm, feedback and continuity.

Try this

Pick one portfolio card: show its title first, then reveal the result after expansion. Next decide how quickly that change should happen.

Reference：Workshop slides

Relative recording time 00:03:12–00:07:51

02 · Easing curves and springs

Session context — App loading states, buttons and notifications introduce timing. Material and spring documentation add the distinction between a speed curve and a settling response.

Notes with material and documentation supplements

Easing controls the rate of change; physical models also account for spring force and damping. Legacy Material guidance commonly decelerates entrances and accelerates exits. Its Standard curve is cubic-bezier(0.4, 0, 0.2, 1); Sharp is cubic-bezier(0.4, 0, 0.6, 1). Damping suppresses oscillation; sufficient damping allows settling without overshoot. Choose a response around the interaction.

Try this

Let a notification decelerate into a readable resting position. For a dragged object returning home, consider a spring response. Choose the interaction before tuning parameters.

Reference：Material: duration and easing; spring reference below

Relative recording time 00:08:15–00:12:53

03 · Turn a screen recording into a product story

Session context — The product explainer demonstrates how a recording supplies material while a storyboard highlights inputs, actions and results.

Notes with material and documentation supplements

The quotation-tool example focused on simplifying a recorded workflow into inputs, actions and results. Recordings, screenshots and text supply the material for a storyboard. Emphasize the main action, quiet secondary UI and leave time to read the result. A roughly 35-second UI brief and a short bank-animation brief illustrated the same method: establish content and purpose before choosing shots.

Try this

Sketch three cards: enter a request → generate → inspect the result. Quiet unrelated interface details and check whether the sequence is understandable.

Reference：Session examples and shared notes

Relative recording time 00:13:01–00:16:36

04 · Effect glossary: attention, transitions and beats

Session context — The product example leads into attention, feedback and continuity. Vocabulary from the shared notes adds concrete techniques to those design goals.

Notes with material and documentation supplements

Push-ins focus attention on detail; typing and cursors make actions visible; staggered entrances establish reading order. Sweeps, morphs, match cuts and irises connect shots. Arcs, subtle squash and overshoot can suggest weight; small breathing motions, parallax or a slow push keep a hold alive. Mark important changes against the music's BPM and downbeats, then review the timing.

Try this

Move the cursor to a button before revealing the result card. This sequence makes cause and effect visible and gives the effect a purpose.

Reference：Effect vocabulary from the materials

Relative recording time 00:22:29–00:23:25

05 · Turn a style into concrete motion

Session context — After discussing attention, the presenter turns to the feeling a piece should convey. That direction gives the script and tool choices a shared goal.

Notes with material and documentation supplements

Choose a brand personality, then specify color, shape, entrance order, travel distance and reading time. Rounded forms and gentle responses can suggest playfulness; clear alignment and brief transitions can feel crisp; small movements and generous reading time can feel composed. These are editorial starting points to adapt. The pink character example illustrated a coherent color-and-motion direction.

Try this

Replace “make it playful” with rounded shapes, soft colors and a light entrance that settles into a readable title. Carry those choices into the storyboard.

Reference：Shared notes

Relative recording time 00:23:25–00:24:06

06 · Review the storyboard before animation

Session context — Before selecting tools, the session asks what each shot should communicate. The later 00:35:49–00:37:16 Q&A turns this into a storyboard deliverable.

Notes with material and documentation supplements

Specify the purpose, audience, landscape or portrait ratio, duration, assets and references. Ask for each shot's content, timing, movement, transition and hold. HTML previews and PNG storyboards support a review before animation. For revisions, name a shot, its problem and the desired outcome—for example, show the button response before revealing the result card.

Try this

Make four columns: image, text, action and hold time. Ask AI for that table and still previews, then review them before animation.

Reference：Shared notes

Relative recording time 00:24:06–00:24:38

07 · Choose tools by the job

Session context — The presenter selects tools after purpose, feeling and script. Beginners can separate drawing, animation timing and the final deliverable.

Notes with material and documentation supplements

p5.js supports creative drawing and interaction; GSAP coordinates tweens and timelines; Motion for React, formerly Framer Motion, handles React UI, gesture and scroll animation; Three.js supports 3D scenes. Video workflows can use After Effects for motion graphics and compositing and DaVinci Resolve for editing, color and audio. Choose a combination around the output and existing project.

Try this

For a pointer-following dot, start by exploring p5.js; for sequencing website cards, explore GSAP. Choose around the existing project and the next concrete task.

Reference：Motion for React documentation; other tools below

Relative recording time 00:25:49–00:27:11

08 · Turn visual constraints into review criteria

Session context — The pink-character example turns a brand feeling into a visual direction. The material’s style constraints become a practical review checklist here.

Notes with material and documentation supplements

Palette, typeface, writing direction, tracking and asset proportions establish a style. Grain, glow, outlines, shadows and line drawing add depth; keep background motion consistent and give primary text contrast and reading time. The materials' outCubic/outExpo, inOutCubic and outBack labels suggest decelerating entrances, smooth transitions and overshoot. Check the chosen tool's easing names and preview.

Try this

Choose one palette and heading font, then make still storyboards. Check the title’s clarity before adding one transition and reviewing consistency.

Reference：GSAP easing; material terminology in shared notes

Relative recording time 00:28:15–00:35:28

09 · Canvas: compute each frame from time

Session context — After introducing production tools, the session explores layers and time. Public documentation supplies the Canvas model used in this explanation.

Notes with material and documentation supplements

Canvas provides a drawing surface. An animation updates position, scale or opacity and redraws, while layers establish foreground, background and text order. Browser animation commonly uses requestAnimationFrame. Mografy's public scene model derives frames from absolute time for preview, seeking and export, with an optional Three.js layer for 3D scenes.

Try this

Imagine a dot moving right: determine the current time, calculate its position and draw that frame. Draw foreground text later to establish a clear layer order.

Reference：Mografy: scene model

Relative recording time 00:35:49–00:38:15

10 · Review preview, export and the website

Session context — Storyboard previews and export waiting times introduce the delivery process. These three review stages make the work easier to inspect.

Notes with material and documentation supplements

Review text, rhythm, layers and transitions in the preview. Check resolution, frame rate, audio and size after export. On the website, verify mobile cropping, downloads, interaction and readability. Time generation, rendering and encoding separately for your own project. As an implementation supplement, preserve keyboard access and a reduced-motion reading experience.

Try this

Check the story in the storyboard, text and rhythm in the export, then mobile presentation in the website. Record one specific revision at a time.

Reference：MDN: reduced motion

Relative recording time 00:38:18–00:48:57

11 · Separate design decisions from implementation

Session context — Questions about storyboards and previews lead into collaboration between AI tools. Carry approved design decisions into each production step.

Notes with material and documentation supplements

The session discussed storyboarding before animation and a participant's Claude-led, Codex-assisted workflow. Compare tools using the same brief: do they follow the requested sequence, produce readable storyboards and support focused revisions? Model preferences and waiting times were session-specific experiences; use your own assets and preview quality to make a choice.

Try this

Keep one approved brief and storyboard. Ask a tool to change only the second shot’s text and hold, then check that the other decisions remain intact.

Reference：Mografy public project

Relative recording time 00:54:22–00:57:07

12 · Load what the reader needs first

Session context — The performance Q&A begins with image loading. Official guidance supplies the implementation details for resource fetching and visual presentation.

Notes with material and documentation supplements

Use loading="lazy" for non-critical images below the fold. Load the hero or LCP image promptly and reserve space with dimensions. Plan fetching and visual reveal separately: prepare the resource, then reveal it with the intended scroll or interaction. For video, choose preload, a poster and a deferred-loading strategy for the target browsers.

Try this

Load the important opening image promptly and defer offscreen project images. Reserve their dimensions, then inspect what a phone downloads.

Reference：web.dev: browser-level image lazy loading

Relative recording time 00:57:09–00:58:21

13 · Responsive images: size and pixel density

Session context — After deferred loading, the presenter discusses image sizes for phones, tablets and desktops. Responsive images give the browser suitable candidates.

Notes with material and documentation supplements

Provide width variants with srcset and describe the expected layout width with sizes so the browser can choose. Fixed display sizes can use density candidates such as 1x and 2x. Use picture for alternative crops or formats. Inspect the image actually downloaded on a phone to balance clarity and transfer size.

Try this

Prepare smaller and larger versions of one project image and describe its layout width. Inspect the phone’s selected file for legibility and transfer size.

Reference：MDN: responsive images

Relative recording time 00:58:27–01:00:46

14 · Media formats, quality and compatibility

Session context — The discussion moves from dimensions to WebP, WebM and compression. Format documentation provides the properties used for these choices.

Notes with material and documentation supplements

WebP supports lossy and lossless compression. PNG compression is lossless; resizing or reducing colors can change the result. WebM is a video container, and file size depends on duration, resolution, frame rate, content and encoding settings. Safari supports WebP; video compatibility depends on browser version, container and codec. Compare your actual media for quality, size and playback, then choose formats and fallbacks.

Try this

Compare the same image as PNG and WebP for detail and size. Record both container and codec for video, then check playback on the target phone and browser.

Reference：Google WebP FAQ; PNG and video references below

Relative recording time 01:01:02–01:05:24

15 · Mografy delivery and other tool entry points

Session context — After performance, the session shares tools and learning resources. These entry points are grouped around delivery and learning goals.

Notes with material and documentation supplements

Mografy's public workflow covers preview and export, listing MP4, WebM, Lottie and SVGA. Its Lottie/SVGA output packages frame images, so check delivery requirements early. HyperFrames builds video projects with web technology; Jitter is a web motion-design tool with an official MCP connection for AI tools. Hera and Motion UX provide generation and design-learning entry points respectively.

Try this

For a first piece, follow Mografy’s preview and export documentation; for motion-design practice, choose a relevant Motion UX topic. Set delivery requirements before choosing a format.

Reference：Mografy; other official resources below

Relative recording time 01:05:39–01:08:22

16 · Coordinate animation with scrolling

Session context — The closing Q&A returns to websites: when several animations share a page, their entrance order matters. The 01:12:17–01:13:30 follow-up revisits that order.

Notes with material and documentation supplements

Define the trigger—page entry, a section entering view, a click or a state change—then specify order, playback scope and end state. The closing Q&A emphasized appearance timing and continuity. Describe the intro, section reveals and button feedback separately, then explain their handoffs so each moment has a clear focal point.

Try this

Write: intro title settles → scrolling reveals a project card → clicking expands details. Preview each handoff with an explicit trigger.

Reference：GSAP ScrollTrigger; session timing synthesis

Apply the method: an original prompt example

Adapt this editorial exercise to your own assets and purpose. Status: ready for a future experiment.

Plan a portrait 9:16 portfolio introduction of about 20 seconds for a potential collaborator meeting me for the first time. Available assets are a logo, three project screenshots and approved introduction text. Keep the existing palette and typography. Sequence: problem → project response → outcome → portfolio link. Deliver a storyboard and still previews first, showing text, focal point, motion and reading time for each shot. Produce the animation after storyboard review. Check mobile text size, transition occlusion and end-card reading time.

JavaScript
Compute positions and behavior
p5.js
Call drawing and interaction functions
Canvas / WebGL
Render in the browser
Visuals and interaction
Redraw on the next update

A simplified p5.js flow: code updates data and drawing tools render it. An HTML/CSS diagram with no external image.

Session Q&A

Questions are restated from the session; technical additions connect to the chapters and official sources above.

Can several images become an animation?

Describe the role and order of the images, then ask for frames or a storyboard. The session used product-operation assets as an example; review continuity between the resulting shots.

Relative source time 00:35:49–00:36:29

Why review a storyboard first?

A storyboard makes sequence, emphasis and reading time reviewable. The session described tools skipping this stage. Explicitly request storyboard delivery and review before animation, including the expected files.

Relative source time 00:36:31–00:39:55

What should I prepare before prompting?

Prepare purpose, aspect ratio, duration, assets and the intended feeling, then request a storyboard. A short prompt can work alongside detailed project instructions and asset descriptions.

Relative source time 00:36:31–00:37:16

What should guide model selection?

The presenter discussed Sonnet/Opus trade-offs in speed, detail and cost. Compare the same small brief for storyboard-first delivery, style consistency, focused revisions and turnaround.

Relative source time 00:39:55–00:42:38

Is a separate Canvas API service needed?

Canvas is a browser drawing API. Mografy's documented workflow lets a coding agent read the local project and instructions, then produce scenes, previews and exports. AI service access follows the chosen tool's requirements.

Relative source time 00:42:38–00:43:37

Can the workflow be automated?

The demonstrated direction was to let an agent read project instructions and create storyboards and scenes from content, duration and assets. Keep review points for the brief, storyboard, preview and export so revisions have a clear target.

Relative source time 00:44:03–00:49:08

How might Claude and Codex share the work?

A session participant described Claude leading planning, Codex assisting implementation and Mografy providing previews. Keep approved decisions in a shared brief so the next tool knows the agreed content and next deliverable.

Relative source time 00:44:42–00:45:02

Is another agent-orchestration layer needed?

The session favored letting an existing agent read the project and complete the brief, storyboard, preview and export workflow first. Add coordination when repeated work and handoffs justify it.

Relative source time 00:48:24–00:48:57

Can audio, slides or text be a starting point?

First extract the narrative, key messages and available assets, then ask for shots and visual requirements. The session discussed these inputs; check that the selected tool can read the files and identify the images or graphics each shot needs.

Relative source time 00:50:32–00:52:01

Where should performance work start?

Start with asset sizes, initial loading, deferred offscreen images and responsive image selection, then inspect animation work and export settings. Use the format and loading sections above as a checklist for your own page.

Relative source time 00:54:22–01:00:46

Where can I continue learning?

Revisit the method in the slides and shared notes, use Mografy documentation for workflow details and Motion UX for motion-design teaching. Hera is a shared AI motion-graphics resource; GSAP documents web-animation APIs. Choose a direction around the output you want to make.

Relative source time 01:01:02–01:05:24

How should animation and website effects work together?

Specify each layer's trigger, entrance, hold and end state, then coordinate the handoff. The closing follow-up emphasized order and continuity; tune speed and scale around the visual focus.

Relative source time 01:02:42–01:08:22；01:12:17–01:13:30

How can I start with recordings and screenshots?

Organize the assets and main action. Ask AI to simplify the workflow around what the audience should understand, then produce a storyboard with HTML/PNG previews. Review it before animation and check the exported result in the website.

Relative source time 01:08:55–01:12:10

Supplementary Q&A: p5.js and tool roles

These build on earlier technical questions and are kept separate from the session Q&A.

What is p5.js?

A JavaScript library for creative coding, drawing and interaction. It creates a browser canvas and supports both 2D and WEBGL rendering, including 3D work.

Reference：p5.js: createCanvas

How do setup() and draw() work?

setup() runs once when the sketch starts. draw() then runs repeatedly to update the scene. noLoop() stops that loop and loop() resumes it; the actual frame rate depends on runtime conditions.

Reference：p5.js: draw (with setup, noLoop and loop references)

Do p5.js, GSAP and Three.js replace each other?

Their responsibilities can overlap. p5.js provides drawing and interaction; GSAP tweens object properties and sequences animations; Three.js provides a 3D library. A project can combine them according to its rendering and timing needs.

Reference：GSAP documentation

Personal reflection

Personal reflection has not been added.

Practice status

No public implementation or execution evidence has been added.

Source list

Materials and technical references are collected here, with one link per resource. Hera is a motion-generation tool and Motion UX provides design tutorials. GSAP’s homepage, API, easing and scrolling documents serve distinct purposes.

See the p5.js / GSAP / Three.js comparison

← Talks & Workshops

Event metadata

Event: October 24 free online talk | Build animated, interactive websites with AI
Announced topic: AI-powered web motion | Interactive website design in practice (AI 讓網頁動起來｜互動網頁設計實戰)
Slide-deck title: AI-powered brand motion | Motion design in practice (AI 讓品牌動起來｜動態設計實戰)
The registration announcement and the slide deck are recorded under their respective titles.
Date: 2026-10-24
Scheduled time: 14:00–15:00 · Asia/Taipei (UTC+08:00)
The session has ended; actual start and end times are to be added.
Type / format: Talk · Online
Presenter: Nocts (奇昌) · presenter named in the event announcement
Organizer: Claude x Codex online study group
Co-organizer: Public information not found
Public venue / platform: Zoom · free online session
Registration / event source: Registration form in the source list
Registration closed (public form checked on October 24). Link retained as an event source.
Materials: Slides, shared notes and documentation

The organizer introduces Nocts as a UI/UX and web designer who combines frontend development, web motion and AI coding to turn designs into working websites.

Announced topics and audience

The announcement covers interaction and animation, explaining content, style and interaction needs to AI, a one-page demonstration and a public prompt guide. It welcomes beginners building personal sites, portfolios or brand pages, as well as engineers and designers; no AI experience, project idea or preparation is required.

Sources and update status

Workshop ended; notes updated from the supplied session transcript. Original synthesis of session topics, materials and official technical references. Visual media, hands-on results and the promised follow-up video remain to be reviewed.

Coverage includes the supplied session text, 12 slides, shared notes and tool documentation. Session Q&A uses relative transcript timestamps. Technical additions follow official documentation; Mografy's implementation description follows its public Canvas/Three.js documents.

Updated：2026-10-24

Back to the notes ↑