Leo
  • Posts
  • Projects
  • About
  • Posts
  • Projects
  • About
Bilibili抖音小红书

© 2026 XT. All rights reserved.

  1. Home
  2. Projects
  3. Liblib AI | Evoken
  4. Lovart Onboarding Motion Graphics

Lovart Onboarding Motion Graphics

A five-part in-product onboarding motion series for Lovart — welcome screen, infinite canvas, quick operations, secondary edit, and tools — helping new users build interface awareness and action paths within seconds of opening the product.

Leo WangApril 12, 2026Liblib AI | EvokenAI VideoMotion PackagingVisual Design
This is a work sample from my previous employment at Liblib AI | Evoken. I served as the video producer and retain the right of attribution under applicable law. Copyright belongs to the original company. This content is for personal portfolio use only, with no commercial or promotional intent.

More projects

  • Lovart: The AI Creative Partner for SMBs

    Lovart: The AI Creative Partner for SMBs

    Brand promo video · AE/PR · Lovart SMB feature launch · storyboard + AIGC (Lovart/Kling) · X/Instagram · 1.11M+ views

  • LibTV 720° Panorama Feature

    LibTV 720° Panorama Feature

    LibTV recently added 720° panoramic video generation — describe a scene in one sentence and AI produces a draggable spherical shot, sharply reducing the setup and iteration cost of immersive spatial storytelling.

  • Lovart Email Section

    Lovart Email Section

    In a marketing email, users glance once — this UI animation uses a fixed prompt bar plus a background asset collage to explain "one prompt, 40 brand assets" in a single frame.

Lovart onboarding motion isn't about a flashy opener — it's about whether a new user can read the interface layout and know where to tap next within the first few moments. Five preview segments follow the usage path: welcome, core workspace, high-frequency actions, and tool access, forming one followable cognitive line.

Welcome to Lovart

The welcome segment sets brand tone and makes "you're in Lovart" unmistakable. Pacing stays steady; copy and UI elements enter at fixed intervals so viewers register the product name and overall feel before feature walkthroughs begin.

Infinite Canvas

The infinite canvas is Lovart's core workspace. This segment visualizes an expandable canvas where content can be freely arranged — pan, zoom, and element placement show that creation isn't locked to a fixed frame but can keep iterating in open space.

Quick Operations

Quick operations follow canvas awareness by grouping high-frequency entry points. Motion is organized by action type — one path highlighted per group — reducing the "lots of features, no idea where to start" problem.

Secondary Edit

Secondary edit makes "you can still change it after generation" concrete — selection, fine-tuning, and local replacement demo in sequence so viewers treat Lovart as a repeatable workflow, not a one-shot generator.

Tools

The tools segment closes the onboarding line by linking common tool entries to canvas and edit capabilities. Icons and function zones light up in logical groups, building spatial memory for "where to find what you need."

Production Approach

Progressive module pacing. Information density ramps from welcome to toolbar: early segments breathe with slower motion; later segments pack more action points and faster cuts, matching how users read — establish context first, then learn operations.

Bilingual master reuse. Chinese and English versions share the same AE timeline and keyframe structure; only text layers swap per language. Both onboarding rhythms stay aligned, and future revisions touch one master comp.