NEXT UP: Event Announcement Template

NEXT UP turns a recurring event into an eight-second mechanical shutter reveal: swap one square image, update the live headline and date, and export next week's announcement. A late-night vinyl club and a calm ceramics workshop use the same 112 keyframes, with different imagery, typography, copy, and colors. Built natively through SVGator MCP, with named elements, editable text, and matching opening and closing poses.

Role: SVG motion design and template architecture Timeline: October 2026 Stack: SVGator, SVG, CSS animation, Antigravity MCP

Recurring events — weekly markets, monthly meetups, regular classes — need fresh promotional content on a tight cycle. Designing a new animated post from scratch every week isn't sustainable. The goal was to create a single template where changing one image, a headline, and a date produces a completely new announcement with the same polished motion.

Mechanical shutter metaphor. Interlocking panels slide apart from the center like a camera shutter, revealing the event image behind them. The metaphor communicates "reveal" and "upcoming" simultaneously.

Single image slot. The template needs exactly one square image. This keeps the weekly update cycle as fast as possible — pick a photo, type the date, export.

112 keyframes, zero timeline editing. All motion is pre-built and content-independent. Swapping the image or changing the text doesn't break any keyframe relationships.

Tone-flexible architecture. The two demo variants — a moody vinyl night and a bright ceramics workshop — prove the template adapts to radically different brand identities through color and typography alone.

The template was built end-to-end through SVGator MCP:

Six interlocking shutter panels were constructed as separate SVG paths with precise edge alignment

Each panel slides outward on its own axis with staggered timing and cubic-bezier easing

The event image fades in behind the opening shutters with a slight scale-up for depth

Headline and date text elements animate in with offset delays after the image is visible

The reverse sequence closes the shutters, returning to the exact opening pose for seamless looping

All elements are organized into named groups: Shutter, Event Image, Headline, Date, Palette.

The finished template is a self-contained SVGator project at 1080 × 1350:

One replaceable square image slot

Live editable headline and date text

Six-panel mechanical shutter reveal with 112 keyframes

Color palette controlled by named variables

Matching opening and closing poses for seamless looping

Two demo variants proving cross-genre adaptability

Open in SVGator · View original post