Conference Speaker Lineup

About this style

Conference and webinar promos sell an event in a few seconds: what it is, when and where, who is speaking and how to register. Software companies run their own user conferences and online events to launch features, meet customers and build a community, and their promos usually lead with a strong typographic identity, because type carries a name and a date more reliably than imagery. Speaker cards are a staple of the format, each with a name, a role, a talk title and a portrait. Illustrated portraits are a common alternative to photos because they give a lineup one consistent look. The register button closes the promo with the one action that matters.

Make a 10-second conference promo in SVG: a bold typographic system builds the event's name, dates and place on a strict grid, four illustrated speaker cards assemble one by one, and a register button with ticket prices lands beside them.

<inputs>
If I don't give you something, use the default and don't ask.
- Event: "Assembly '26", Quillwork's conference for people who build software products (Quillwork and the event are fictional). "Nov 12–13, 2026" · "Lisbon + online" · "2 days · 24 talks · 6 workshops"
- Speakers (name · role · talk):
  Amara Okonkwo · VP of Design, Quillwork · "Designing for the second user"
  Tomás Herrera · Founder, Fieldlight · "Shipping weekly without breaking things"
  Mei Lin Tan · Head of Research, Ravenstone · "What 400 interviews taught us"
  Jonah Feld · Staff Engineer, Quillwork · "Real-time sync at scale"
  (Fieldlight and Ravenstone are fictional companies.)
- Tickets: button "Register" · "Online · Free" · "Lisbon · €290" · "Early rate ends Oct 30"
- Bottom band: "NOV 12–13 · LISBON + ONLINE · 24 TALKS · REGISTER BY OCT 30 FOR €290"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a poster-grade event identity: a saturated cobalt ground, a tall condensed display face in cream, cream hairline rules that divide the frame into a strict grid, small tracked all-caps labels, and four flat editorial portraits on solid color blocks atop cream cards. It should feel designed by a studio, not a template: confident contrast of scale, nothing centered by default, every element hanging from the grid.
- Palette: ground cobalt #2B45D4; cream #F6EFE4 (display type, labels, rules, card bodies); tomato #FF4B2B ("'26", the register button, the bottom band); ink #1C1717 (text on the cards); portrait blocks tomato #FF4B2B, mustard #F2B533, pine #1F6B52 and sky #9CC3F5; skin tones #8D5A3B, #C68B5E, #E7B48F and #F1C9A5; hair #1C1717, #3B2A20 and #6B4A2E; clothing in cream, ink and tints of the block color (20% lighter, 25% darker); the note under the prices in cream at 72%.
- Type: Anton 400 for the display ("ASSEMBLY" at 300px, tracking 0.01em) and the speaker names (34px, uppercase); Instrument Sans 400/600 for everything else: labels 600 16px uppercase with 0.16em tracking; the info row 600 28px; roles 400 18px; talk titles 600 20px/26px; prices 600 22px; the band 600 22px with 0.12em tracking.
- The grid: 120px margins, 12 columns with 24px gutters; cream rules 1.5px at y 470 (x 120–1800) and y 940, and a vertical rule at x 1560 from y 470 to 940 that sets off the ticket column.
- The header: "QUILLWORK PRESENTS" as a label at (120, 92); "ASSEMBLY" in cream with "'26" in tomato right after it on the same baseline, left edge x 112, baseline y 400; the info row on a baseline at y 450: "NOV 12–13, 2026", "LISBON + ONLINE" and "2 DAYS · 24 TALKS · 6 WORKSHOPS", separated by 1.5px cream vertical rules 28px tall with 28px of space either side.
- Speaker cards: four 320 × 420 cards with 32px gaps at x 120, 472, 824 and 1176, top at y 500, radius 0. Each: a portrait block 320 × 250 in its color (tomato, mustard, pine, sky in order), then the cream body below it: the index "01" to "04" as a label in ink at (16, 280), the name in Anton 34px ink at (16, 322), the role at (16, 350) in ink at 72%, the talk title in quotes at (16, 382) wrapped to 288px.
- Portraits: original flat editorial illustrations, head and shoulders, each built from a few SVG paths with no outlines except a few 3px ink lines for features: an oval head on a neck, shoulders as one wide rounded shape in clothing colors, hair as one or two shapes, eyes as two short arcs or dots, brows, a single line for the nose and a small curve for the mouth, and one flat shadow shape on each face in its skin tone 12% darker. Amara: a high, rounded natural crown of hair, a cream top. Tomás: short wavy hair, a short beard, an ink jacket over a cream shirt. Mei Lin: a straight bob with a fringe and round glasses drawn as two 3px circles, a mustard-tint sweater. Jonah: close-cropped hair, a collared shirt in a sky tint. Each figure sits off-center in its block and is cropped at the shoulders by the block's bottom edge. Varied skin tones, ages and styles; no stock-avatar sameness.
- The ticket column, x 1588–1800: "TICKETS" as a label at y 528; the button below at y 556, 212 × 72, radius 36, tomato, "Register" in Instrument Sans 600 26px cream with a 20px arrow drawn as a path; the prices at y 680 and 716; the note at y 760 in 16px.
- The bottom band, y 970–1040, full width: tomato with the band text in cream, starting at x 120.
- Motion: the display word builds from its letters: each of the eight rises from below a clip line at its baseline in 0.4 s on easeOutExpo, 55 ms apart; "'26" drops in from above 0.1 s after the last letter; rules draw from their start points in 0.4 s on easeInOutCubic; labels type on at 45 characters per second; the info row's items rise 20px, 0.12 s apart. Each card: the cream body rises 30px as it fades in, the color block wipes up from its bottom edge (0.3 s, easeOutQuart), then the figure assembles: shoulders rise 40px (0.3 s), the head and neck rise 30px 0.08 s later (0.25 s), the hair drops 12px onto the head (0.2 s) and the features draw with stroke-dashoffset (0.25 s); the text rises line by line, 60 ms apart. The button scales up from 0.85 with a back-out spring (0.4 s); its arrow nudges 6px right and back once after the poster. The band wipes in from the left (0.4 s, easeInOutCubic) with its text sliding in 40px behind.
- After the poster, each speaker blinks once (the eyes squash to a line for 0.12 s), 0.35 s apart: a small sign of life.
- Premium: a real typographic system (contrast of scale, a strict grid, hairlines, tracked labels), portraits that feel drawn by an illustrator with four distinct people, color discipline with the portrait blocks as the only extras, motion that builds the grid instead of decorating it. Cheap: everything centered, a stock gradient background, round photo avatars with drop shadows, "Speaker Name" placeholders, clip-art people, a pulsing button, a ticker that never stops, glow.
- Banned: photos or photo-like portraits, generic avatar icons, gradients, glow, drop shadows on the cards, a pulsing or flashing button, emoji, purple gradients, real event or venue names, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.2s: the cobalt ground alone.
- 0.2–1.25s: "QUILLWORK PRESENTS" types on; the letters of "ASSEMBLY" rise (0.25–1.05 s); "'26" drops in (1.1–1.3 s).
- 1.1–1.8s: the rules draw; the info row's items rise (1.35–1.75 s).
- 1.8–2.9s: card 01, Amara Okonkwo, builds.
- 2.3–3.4s: card 02, Tomás Herrera.
- 2.8–3.9s: card 03, Mei Lin Tan.
- 3.3–4.4s: card 04, Jonah Feld.
- 4.4–5.1s: the ticket column: the label types on, the button springs in at 4.55 s, the prices rise at 4.8 s and the note at 4.95 s.
- 5.1–5.7s: the bottom band wipes in.
- 6.0s: the hero frame: the display name, info row, all four speaker cards with complete portraits and text, the ticket column and the band.
- 6.5–6.8s: the register arrow nudges once.
- 7.0–8.2s: the four blinks, at 7.0, 7.35, 7.7 and 8.05 s.
- 8.2–10.0s: hold.
For other lengths, change the stagger between cards (0.4–0.7 s) and the hold; keep each card's build about 1.1 s and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face and weight before measuring text and before defining window.seek.
- Engine: one inline SVG with viewBox 0 0 1920 1080. Each portrait is a group of paths with clip paths for the block wipe; letters of the display word are separate text elements positioned from measured advances after the fonts load; seek sets transforms, clip rectangles, stroke-dashoffsets, typed lengths and opacities.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 2.4, 4.6 and 7.05: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that "ASSEMBLY '26" fits inside the margins and sits on the grid; the info row's rules are evenly spaced; every portrait reads as a distinct, drawn person (Amara's crown of hair, Tomás's beard, Mei Lin's glasses, Jonah's collar) with features in place and the figure cropped at the shoulders; every name, role and talk title fits its card (two lines at most for the talk); the button label and arrow are centered in it; nothing pulses. At 6.0 s every element is present and readable. The final frame is that composition at rest after the blinks. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…