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

© 2026 XT. All rights reserved.

  1. Home
  2. Projects
  3. Liblib AI | Evoken
  4. 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.

Leo WangApril 22, 2026Liblib AI | EvokenUI Animation
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.

  • Voice Mode Feature Motion

    Voice Mode Feature Motion

    In-product UI motion for Lovart Voice Mode — entry, feedback, and state transitions that help users quickly grasp the voice interaction entry point and how it connects to the canvas.

An email section is not a landing page: there is no scroll room, and users will not watch frame by frame. The animation has to convey both "type one sentence" and "get a pile of cross-channel assets" inside one static canvas, at very high information density.

The Hard Part Is Volume, Not the Feature

"Create 40 campaign assets for my brand" is concrete, but you cannot show all 40 items. A product screenshot alone leaves only the input bar in memory; a pile of assets alone hides where they came from. The core challenge: make volume and cause-and-effect feel true at the same time.

How the Edit Stacks Both Stories

The input bar stays centered. The prompt field sits in the middle throughout. A typing animation fills in the full instruction first, anchoring user intent. However the background shifts, viewers know these outputs belong to one request.

Background goes from empty to full. The opening is near-blank — soft circular gradients only. Then Lovart brand assets — social covers, merch, color swatches, Voice Mode thumbnails — flow in from the edges and the collage density ramps up. Not 40 images popping at once, but a natural sense of the frame being filled.

Real assets, not a number. Platform badges (TikTok, LinkedIn, Shopify) sit on matching creatives, implying cross-channel delivery. The same logo repeats across formats, making "one brand, many shapes" clear without writing "40" on screen.

Post Production Notes

Typing and background are offset. While text is still appearing, the background stays restrained so motion does not fight for attention. Once the line is complete, the background accelerates — cause and effect read more clearly.

Collage layers use depth. Near assets scale up slightly, distant ones soften. Scale and opacity ramps in AE keep high density from turning into flat wallpaper.

Input UI on its own comp. The prompt bar lives on a top pre-comp so background motion never hurts legibility.

The rule for email UI motion: input and output must coexist in one frame, and the sequence should let viewers infer causality themselves. Keep the bar still, let the background tell the volume story — that beats any numeric headline.