Series A Funding Announcement

About this style

Funding announcements are a rite of passage for startups: a post, a press release and, more and more often, a short video saying how much was raised, who led the round and what the money is for. A Series A is usually a company's first large round from institutional investors after its seed funding. Good announcements turn the number into a story for customers and future hires rather than a boast, which is why the best ones are mostly typography: the amount, the investors' names and two or three concrete plans. Kinetic type suits the format because the words carry the news, and an editorial layout makes it read like a headline rather than an ad.

Make a 10-second funding announcement in confident kinetic type, in HTML and CSS: "We raised our $24M Series A" builds word by word at full scale, the amount rolls into place like a mechanical counter, then the headline steps aside into an editorial layout that names the investors and lists what the money is for.

<inputs>
If I don't give you something, use the default and don't ask.
- Company: Brindle (fictional), accounts-payable software for independent restaurants; 4,100 restaurants use it.
- Round: "$24M Series A", led by Northgate Ventures (fictional), with Hollow Oak Capital and Saltmarsh Partners (fictional) and "12 operators and chefs".
- Headline: "We raised" / "our $24M" / "Series A."
- Subline: "Brindle helps 4,100 independent restaurants pay their suppliers on time."
- What it's for: "01 Grow the team from 40 to 80" · "02 Open an office in Chicago" · "03 Launch Brindle Payroll in 2027"
- Label: "ANNOUNCEMENT · NOV 2026" · closing pill: "We're hiring for 40 roles"
- Length: 10 seconds.
</inputs>

<direction>
- Look: an editorial front page on warm paper. A big, soft display serif that knows it's good news, set with the confidence of a magazine cover, and a quiet grotesque for the facts. Type is the whole show: words arrive on a steady rhythm through clean masks, the amount rolls like a mechanism, and everything settles into a two-column layout with hairline rules. No icons, no illustrations, no confetti.
- Palette: paper #F4EFE4 with a fine generated grain (an SVG feTurbulence noise layer at 5%, multiply); forest ink #173A2C (headline, names); deep ink #0F271D (list numbers); body #3C5A4C; labels #7A8A78; amber #D9822B (the amount, its underline, the label, the pill); rules #CFC6B4.
- Type: Fraunces, loaded with its ital, opsz, wght and SOFT axes: the headline at opsz 144, wght 600, SOFT 50, 136px, line height 0.98, tracking −0.025em; "$24M" in italic at wght 700; investor names at wght 500. Work Sans 400/500/600 for labels, body and the list.
- Final layout, the hero. Left column x 120–1040: the label at (120, 150) in Work Sans 600 18px, tracking 0.14em, amber; the headline on baselines at y 330, 463 and 596; a 6px amber underline with round caps under "$24M" at y 615, from its first glyph to its last; the subline at (120, 712) in Work Sans 400 30px/42px body color, wrapped to 760px. A 1px rule at x 1100 from y 150 to 930. Right column x 1160–1800: "LED BY" (a label in the label color) at y 168; "Northgate Ventures" in Fraunces 500 46px at y 230; a rule at y 270; "WITH" at y 312; "Hollow Oak Capital" and "Saltmarsh Partners" in Fraunces 500 34px at y 364 and 410; "and 12 operators and chefs" in Work Sans 400 22px body color at y 452; a rule at y 492; "WHAT IT'S FOR" at y 534; the three items at y 594, 652 and 710 in Work Sans 500 26px forest, their numbers in Work Sans 600 26px deep ink with tabular figures in a 56px column. Footer on a baseline at y 1000: the Brindle wordmark at x 120 and the pill right-aligned to x 1800.
- The wordmark, original: a 32px forest rounded square (radius 8) filled with five diagonal amber stripes clipped to the square, then "Brindle" in Fraunces 600 30px forest. The pill: 44px tall, a 1.5px amber outline, Work Sans 600 20px amber.
- Investor marks, original and tiny (22px, forest), each 14px left of its name: Northgate, an N built from two posts and a diagonal bar; Hollow Oak, a circle with a wedge cut out; Saltmarsh, three short horizontal lines of different lengths.
- Center stage, before the layout: the headline block set at 1.6× (218px), centered as a block on (960, 540), so it can step into its final place with a single transform.
- Word reveals: each word rises from 60% of its height below its own clip line to its baseline in 0.42 s on easeOutExpo, its opacity 0 → 1 over the first 40%; words in a line start 90 ms apart; never letter by letter.
- The amount: "$" and "M" arrive like words; the "2" and the "4" are odometer columns (0–9 stacked, clipped to one digit) that roll from 0 to their digit in 0.6 s on easeOutCubic, the "4" finishing 0.08 s after the "2"; then the underline draws left to right in 0.3 s on easeInOutCubic.
- The step aside: the headline block scales from 1.6× to 1× and moves to its final place in 0.6 s on easeInOutQuint, as one transform on the block so the type never reflows; the vertical rule draws downward as it lands.
- The right column: labels type on at 40 characters per second; names and items rise like the headline's words with 24px of travel in 0.35 s; horizontal rules draw left to right in 0.3 s.
- Premium: a soft serif with optical sizing at display sizes, tight but even spacing, clean masked reveals on a steady rhythm, an amount that rolls like a mechanism, a layout that snaps to a grid with hairline rules, plenty of paper. Cheap: letters flying in from random directions, 3D spinning text, bouncy springs on every word, money bags, rockets, emoji, confetti, glowing gradients, all-caps shouting, stock handshake photos.
- Banned: confetti, emoji, rocket or money icons, glow, gradients on type, drop shadows, purple anything, letter-by-letter typing on the headline, real investor names, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.25s: paper and grain, nothing else.
- 0.25–0.85s: "We raised" rises at center stage.
- 0.85–1.8s: "our" rises; "$" and "M" arrive and the 2 and 4 roll (0.95–1.6 s); the underline draws (1.5–1.8 s).
- 1.8–2.3s: "Series A." rises, its period 0.1 s after the A.
- 2.4–3.0s: the headline steps aside into the left column; the vertical rule draws (2.8–3.2 s); the label types on (2.9–3.4 s).
- 3.0–3.9s: "LED BY" and Northgate Ventures with its mark (3.0–3.4 s); the first rule; "WITH"; Hollow Oak Capital and Saltmarsh Partners 0.12 s apart (3.4–3.8 s); "and 12 operators and chefs" at 3.8 s.
- 3.9–4.9s: the second rule; "WHAT IT'S FOR"; items 01, 02 and 03 rise 0.2 s apart from 4.2 s.
- 4.9–5.8s: the subline rises in its two lines (5.0–5.4 s); the wordmark's stripes slide into the square and its name fades in (5.3–5.7 s).
- 6.0s: the hero frame: the full headline with the amber amount and underline, the subline, the investors, the three uses of the money and the wordmark.
- 6.5–7.0s: the pill draws its outline and its text fades in.
- 7.0–10.0s: hold.
For other lengths, change the pace of the right column and the hold; keep the word rhythm, the 0.6 s step aside 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, weight and style (Fraunces roman and italic) before measuring text and before defining window.seek.
- Engine: HTML/CSS: the final layout is laid out once in DOM at its final positions; seek sets each word's clip and offset, the odometer columns' translateY, the headline block's single transform, rule lengths (scaleX or scaleY from their start points) and typed-label lengths. The grain is an inline SVG filter over the stage. The underline's length comes from measuring "$24M" after the fonts load.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 1.3, 2.7 and 4.5: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 1.3 s the digits are mid-roll inside their clip and never show two half digits outside it; at 2.2 s the whole three-line headline is centered at 1.6×; at 2.7 s it is moving as one block without reflowing; the underline sits exactly under "$24M"; the right column's text fits inside x 1160–1800; the grain is subtle. At 6.0 s the complete layout is in place and readable: headline, amount, subline, investors with marks, the three numbered items and the wordmark. The final frame adds the pill. 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…