Logo to UI Morph

About this style

Animated logos grew out of television idents and film studio openings, where a mark had a few seconds to establish a brand. Software marketing often asks the mark to do more: transform into the product itself, showing that the identity and the interface are built from the same geometry. Companies use the device to open or close launch films and in homepage heroes, because it ties brand and product together in a single gesture and gives a simple mark a story. It works when the mark really is made of the layout's shapes, so the morph is a true transformation rather than a crossfade, when the motion is quick and decisive with a clear rhythm, and when the loop closes exactly on the mark it started from.

Make a 10-second logo-to-interface film: a pinwheel mark of four rounded cream tiles on a cobalt field spins a quarter turn, then its tiles stretch into the four panels of a design-review app around a poster in the middle, the poster gets approved, and the layout folds back into the mark, which turns once more and lands beside its wordmark.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Fourfold, a workspace where small creative studios share and approve work (fictional). Wordmark: "fourfold", all lowercase. Tagline: "Your studio's work, in one place."
- The file: Hale Studio / Spring Open House / Poster v3, status "In review".
- People: Ines Marsh (IM, the studio lead, who approves), Tomas Rey (TR), Jae Kim (JK).
- Comments: Tomas Rey · 12m · "Swapped the date to Sat 14 March." / Jae Kim · 4m · "Headline at 64 pt, ready for a look."
- Files: Poster v3, Poster v2, Story frames, Type tests, Brief.pdf, Moodboard.
- The poster: "SPRING / OPEN / HOUSE" and "Sat 14 March · 11–5 · Hale Studio".
- After approval: status "Approved", the button "Approved ✓", the bottom bar "Approved by Ines Marsh · just now".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a confident brand film where the logo and the interface are literally the same shapes. One saturated cobalt field, cream tiles that become cream panels, ink type, a single lemon accent. Motion is snappy and decisive, with quick in-out curves and hard stops; the rhythm is the point.
- Palette: field cobalt #2B4BEE; tiles and panels cream #FFF4E6; panel insets #F0E6D6; hairlines on cream #E9DECF; ink #14161F; secondary #5C6075; lemon #F5E04B, used only for the approval (button, chip, stamp, dots), and cobalt reused as a text and selection color on cream. Nothing else, no gradients.
- Type: Archivo, a variable font with a width axis: the wordmark in Archivo 800 at width 125, 120px, letter-spacing −0.01em; the poster type in Archivo 800 at width 125; UI in Archivo 500 and 600 at normal width, 13–18px; section headers in Archivo 700, 13px, uppercase, tracked 0.08em.
- The mark (a 240px pinwheel centered at (960, 540), box x 840–1080, y 420–660): four cream tiles with 22px corner radius, inset 6px from their cells so 12px gutters separate them, around an 80px square hole at the center: A (top) x 846–994, y 426–494; B (right) x 1006–1074, y 426–574; C (bottom) x 926–1074, y 586–654; D (left) x 846–914, y 506–654. It has four-fold symmetry: after a 90° turn it lands on the same shape, so when a turn ends, reset the rotation and let each tile take the slot it landed in.
- The layout (the same four tiles, now panels with 12px radius and 10px gutters, around the hole that becomes the canvas): top bar x 240–1350, y 120–186; right panel x 1360–1680, y 120–870; bottom bar x 570–1680, y 880–960; left panel x 240–560, y 196–960; the canvas, the cobalt seen through the hole, x 570–1350, y 196–870.
- Panel contents:
  - Top bar: a mini mark (18px) and "fourfold" (Archivo 700, 18px) at the left; the breadcrumb "Hale Studio / Spring Open House / Poster v3" (500, 16px, secondary, the last part in ink); at the right, the status chip "In review" (600, 14px, ink on #F0E6D6, pill), three 28px avatars (IM in cobalt with cream initials, TR in #F0E6D6 with ink, JK in ink with cream) overlapping by 8px, and a "Share" pill button (ink fill, cream label, 84 × 36).
  - Left panel: the header "FILES"; six 44px rows, each a 28 × 28 thumbnail (a tiny composition in cobalt and ink) and a name; "Poster v3" selected with a #F0E6D6 fill and a 3px cobalt bar on the left; "Hale Studio · 6 files" (13px, secondary) at the bottom.
  - Right panel: the header "REVIEW"; two comment cards (avatar, name in 600, time in secondary, text in 500, 15px, line-height 22px); at the bottom a "Request changes" text button (secondary) at y 760 and the "Approve" button at y 790–842 (280 × 52, radius 26, ink fill, cream label in 600, 17px).
  - Bottom bar: a version line with three dots "v1 · v2 · v3" (v3 filled ink) joined by a hairline, and at the right "Last edit 4 min ago by Jae Kim" (500, 14px, secondary).
  - Canvas: "Poster v3 · A3" (500, 13px, cream at 80%) above an artboard; the artboard 330 × 460 in cream centered at (960, 533) with a 2px #14161F shadow offset down-right, "SPRING", "OPEN" and "HOUSE" stacked in ink (Archivo 800, width 125, 64px, line-height 0.9) at its top-left with a 120px cobalt circle tucked behind "OPEN", and "Sat 14 March · 11–5 · Hale Studio" (600, 14px) along its bottom.
- The morph: each tile animates left, top, width, height and corner radius (22px → 12px) from its mark rectangle to its panel rectangle on easeInOutQuint (cubic-bezier(0.83, 0, 0.17, 1)), 0.6 s each, staggered 0.1 s in the order top, right, bottom, left. Contents appear only after their panel lands, fading and rising 6px on easeOutCubic, 30 ms apart per item; the artboard scales 0.96 → 1. Folding back is the exact reverse: contents fade out (0.15 s), then the panels morph back into the tiles in the order left, bottom, right, top.
- The cursor: an original ink arrow (24px) with a 2px cream edge, moving on easeInOutCubic along a slight arc and pressing to 0.92 on a critically damped spring (ω 40 rad/s).
- The approval: the cursor travels from just outside the frame at the bottom-right (1980, 1120) to the "Approve" button (1520, 816); the button lightens to #2A2D3A on hover; on the click it presses and morphs into "Approved ✓" with a lemon fill and ink label (0.2 s), the check an inline SVG stroke; then, 0.1 s apart: the top chip turns lemon and reads "Approved" (its width animating to fit); a lemon round stamp (84px) reading "OK" in Archivo 800 lands on the artboard's top-right corner at −8°, scaling 1.3 → 1 on easeOutBack 1.6; the bottom bar text crossfades to "Approved by Ines Marsh · just now" with a lemon dot; "Poster v3" in the file list gets a lemon dot.
- The lockup: the mark at a 200px box and the wordmark side by side, 48px apart, the pair centered on the frame, the wordmark in cream revealed by a clip sliding out from behind the mark; the tagline under the wordmark, left-aligned to it, in Archivo 500, 28px, cream at 75%.
- Premium: one geometry that is both the mark and the layout, morphs with real rectangles (never crossfades), quick quint curves with hard stops, a single accent with one meaning, crisp type on a saturated field. Cheap: shapes that fade into a screenshot, soft gradients, bouncy elastic easing everywhere, a generic dashboard, drop shadows on everything, a second accent color.
- Banned: crossfading the mark into the UI, gradients, glows, blur, elastic or bouncy easing (except the stamp's single easeOutBack), more than one accent, purple, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.6s: the cobalt field; the four tiles slide into the pinwheel from their own sides (top from above, right from the right, bottom from below, left from the left) on easeOutQuint, landing together at 0.6 s.
- 0.6–0.9s: the mark turns 90° clockwise on easeInOutQuint and stops.
- 0.9–1.8s: the morph into the layout, top, right, bottom, left.
- 1.8–2.8s: the contents arrive panel by panel and the artboard settles in the canvas.
- 2.8–4.8s: the approval: the cursor arrives (2.8–3.5 s), hovers, clicks (3.6 s); the button, chip, stamp, bottom bar and file dot change (3.7–4.1 s); the cursor eases out of frame to the bottom-right (4.3–4.8 s).
- 4.8–6.3s: hold. The 6.0 s frame is the hero: the full app on cobalt, the poster with its lemon "OK" stamp, "Approved" in the top bar, the comments, "Approved ✓", the file list and the bottom bar, every label readable.
- 6.3–7.1s: the contents fade out and the panels fold back into the pinwheel, left, bottom, right, top.
- 7.1–7.45s: the mark turns another 90° and stops.
- 7.45–8.2s: the mark shrinks to its 200px box and slides left as the wordmark slides out from behind it; the tagline fades in under the wordmark (7.9 s).
- 8.2–10.0s: hold on the lockup, nothing moving.
For other lengths, stretch the hero hold; keep every morph, turn and the approval at their speeds, and at least 1 s of final 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 before defining window.seek.
- Engine: HTML/CSS: the four tiles are absolutely positioned divs whose left, top, width, height, border-radius and opacity are set from t in seek through inline styles, never through transitions; the mark's turn is a transform on a wrapper. Panel contents are DOM inside each tile with overflow hidden. Implement easeInOutQuint, easeOutQuint, easeOutCubic, easeOutBack and the cursor spring as JS functions of t. Set font-variation-settings for Archivo's width axis and load the axis range from Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 0.7 s the pinwheel reads as a clean mark with even 12px gutters; at 1.5 s the tiles are visibly stretching into panels, not fading; the canvas is the cobalt seen through the hole; panel text never spills out of its panel while panels resize; lemon appears only in the approval; the 6.0 s frame shows the complete approved app with every label readable; and the final frame is the mark, wordmark and tagline lockup centered on cobalt. 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…