---
id: "2111674286947610783"
source: https://x.com/HamzaInstantly/status/2111674286947610783
author: "Hamza A. (@HamzaInstantly)"
media: "video, 1728x1080, 4.6s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Navy Mascot Footer Showcase Reel

## Summary
A short showcase reel that opens on a dark navy website footer, with a serif headline, link columns and a row of fuzzy blue mascots rising from a glowing horizon, then zooms out to reveal it as one card in a grid of website screenshots on a sunlit beige wall. It shows both a strong footer composition and a neat way to present a portfolio of web work.

## Style
- Theme: mixed (navy footer cards on a warm beige wall)
- Mood: playful, polished, warm, confident
- Tags: footer, mascots, serif-headline, showcase-reel, zoom-out, screenshot-grid, window-shadows
- Category: Footer, Motion

## Palette
| Role | Hex |
|---|---|
| Footer navy | #0E1123 |
| Deep indigo glow | #1D2884 |
| Mascot blue | #3050E5 |
| Periwinkle | #A3BEF7 |
| Off-white text | #F5F5FD |
| Wall beige | #D2CAC5 |
| Wall shadow | #BCB1AA |
| Deep shadow | #A0948F |

## Typography
- Footer headline: light transitional serif, sentence case, two lines, tight leading (1.0), about 7% of the frame height in the close-up. Closest: Instrument Serif or Newsreader 300.
- Wordmark bottom-left: a lowercase serif placeholder, larger than the link text, with a tiny copyright line under it.
- Paragraph and link columns: small sans (about 6px in the frame, 13px on the site), white at 80%. Inter 400.
- Other cards in the grid repeat the serif headline plus sans body pattern.

## Layout
- 16:10 (1728x1080). The footer card spans about 82% of the width at the start.
- Inside: headline top-left, a short paragraph at the right at about 40% height, wordmark bottom-left, four link columns bottom-right (the last with social icons).
- Mascots: five fluffy rounded blobs along the bottom edge, cropped at their eyes, over a navy-to-electric-blue vertical gradient.
- Zoomed out: a grid of 16:10 cards with gutters about 8% of the width, thin hairline crop marks at the intersections, and diagonal window-blind shadows across the wall.

## Elements
- Footer: headline, paragraph, wordmark, link columns (Product, Resources, Company, Latest news) and four small social glyphs.
- Mascots: fuzzy cobalt blobs with two white rectangular eyes each, lit from below by the gradient.
- Neighbour cards: a lavender card with a serif headline and a 3D icon, a white card with an isometric line drawing of a box, a dark card with a phone mockup, a card framed in dark green with a sky and placeholder wordmark, a black card with colourful pixel shapes.
- Crop marks: small crosshairs at grid corners.

## Motion
- 0.2s: close-up of the footer filling the frame.
- 1.0s: quick zoom out; the card shrinks to about 40% of the width on the bare wall.
- 1.9s: further zoom out; the surrounding cards come into view in a 3-column grid.
- 2.7s to 4.4s: slow drift up and to the left (about 3% of the frame per second) while the wall shadows stay put.
- Zoom steps last about 800ms each with a strong ease-in-out (expo); the drift is linear. Clip ends without looping.

## Rebuild it
1. Footer: `bg-[#0E1123] text-white rounded-none px-12 pt-16 pb-0 relative overflow-hidden` with a `grid grid-cols-[1fr_auto]` top row and a bottom row of wordmark plus four `ul` columns.
2. Horizon: an absolutely positioned bottom div with `bg-gradient-to-t from-[#3050E5] via-[#1D2884] to-transparent h-1/3`.
3. Mascots: five SVG or image blobs positioned along the bottom; animate them with Motion `y` from 40 to 0 (spring, stagger 0.08) when in view.
4. Showcase: place cards in a CSS grid on a `bg-[#D2CAC5]` stage with a repeating-linear-gradient diagonal shadow overlay at 15% black.
5. Animate the grid container with Motion keyframes `scale: [2.2, 1, 0.75]`, `times: [0, 0.4, 0.8]`, `duration: 2`, `ease: [0.7, 0, 0.3, 1]`, then a linear `x` and `y` drift.

## Generation prompt
A website showcase reel: first a close-up of a dark navy footer with an elegant light serif headline, small link columns and a row of fuzzy cobalt blue mascots with white rectangular eyes rising from a glowing blue horizon, then a zoom out revealing it as one of many website screenshots arranged in a grid on a warm beige wall with diagonal sunlight shadows from window blinds; polished, playful, no real logos.