类型：区块 · 收录：2026-10-31 11:56:25 · 源码：会员可见
# Prompt: TIDE engraving footer
Build a single-file **website footer** for a fictional enterprise-AI company, **TIDE** ("The steady layer for enterprise AI"). Use plain HTML, CSS and vanilla JS, with no framework and no build step.
The footer is ink-black with cream type and a dashed grid. A wide, hand-engraved pen-and-ink seascape fills the bottom edge to edge: crashing waves, and a lighthouse on a rocky outcrop on the right. On load, the engraving is stamped in from left to right on a canvas while a swarm of pale ink flakes, like sea spray, flies in just ahead of the edge and settles into the drawing.
## Media
- **Engraving:** https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/95cdecac-387a-4c1f-b118-0184d732f4ae.webp
- 2296×860 WebP with alpha, served with `access-control-allow-origin: *`.
- Every pixel is cream `#F1EADB`, and the linework lives in the alpha channel. The sky is fully transparent.
- Load it with `crossorigin="anonymous"` so the canvas can read its pixels.
- **Fonts:** none. Use the system stack `"Helvetica Neue", Helvetica, Arial, sans-serif`.
## Palette
| Token | Value |
|---|---|
| Background | `#0e0e0d` (also on html/body, `color-scheme: dark`) |
| Ink | `#f1eadb` (logo, headings, hover state) |
| Muted text | `rgba(241,234,219,.62)` |
| Dashed rules | `rgba(241,234,219,.24)` |
| Easing | `cubic-bezier(.22,.61,.36,1)` |
| Ease-out | `cubic-bezier(.16,1,.3,1)` |
## Layout (desktop, designed on a 1148 × 720 frame)
- **Footer:** full width, height `max(640px, 100vw × 720 / 1148)`, `overflow:hidden`. The body is a min-100vh flex column with the footer pinned to the bottom.
- **Dashed grid:**
- Five vertical 1px dashed lines (5px dash, 4px gap) at 4.4425 %, 27.2648 %, 50 %, 72.7352 % and 95.5575 %.
- One horizontal dashed line at top 50px.
- **Columns:** four equal columns between 4.4425 % gutters, starting at top 50px, each centred with 51px top padding.
1. **Brand:**
- The logo is a 36px solid cream square with a 17px background-coloured square cut in its centre, then the wordmark "TIDE" in bold at 36.5px with -.035em tracking, 15px gap.
- The tagline "The steady layer for enterprise AI" is 13.6/18px muted, max 170px wide.
- "© 2026 Tide Labs, Inc." sits 16px below it.
2. **Product:** Platform, Solutions, Security.
3. **Company:** About, Careers, Contact.
4. **Resources:** Research, Documentation, Blog.
- Headings are 16.8px weight 400 in ink. The lists sit 15px below them, with rows 31.7px tall. Links are 13.6/18px muted.
- **Engraving band:** absolutely positioned at the bottom, full width, `aspect-ratio: 1148 / 430`. It holds the source `<img>` (opacity 0, used as the source and the no-JS fallback) and a `<canvas>` over it.
## Entrance
- **Vertical lines:** drawn top-down (scaleY 0 → 1, 1.6s), staggered 0, .06, .12, .18 and .24s.
- **Horizontal line:** drawn left-to-right (scaleX, 1.4s).
- **Logo mark:** spins in from -24° and scale .55 at 0 opacity, starting from `#8a857b` and settling to the ink colour (0.9s ease-out, .3s delay).
- **Wordmark:** rises out of a 40px mask (translateY 110 % → 0, .8s, .5s delay).
- **Text wipe:** every other text item (tagline, copyright, headings, links) wipes in left-to-right like typing. It uses `clip-path: inset(-8px 100% -8px -40px)` → `inset(-8px -40px -8px -40px)` with opacity .2 → 1, 0.7s, delays from .6s to 1.4s across the columns. The wipe ends un-clipped with slack so the hover dash and underline aren't cut.
## Engraving stamp-in (canvas)
- **Grid sampling:** sample the image's alpha on a 3px CSS grid and skip cells with alpha below 20 (the sky).
- **Arrival points:** each ink cell gets an arrival point `at = x + random^1.6 × 60px`, which gives a ragged front.
- **Flakes:** 7.5 % of cells are flying flakes, weighted ×1.4 where alpha is above 160 and ×0.6 elsewhere. Each flake has:
- an up-right fan angle between -1.25 and 0.65 rad and a distance of 12 + random^1.4 × 105px,
- a rotation and a spin,
- a length of 3–8px and a thickness of 1.2–2.6px,
- a cream tone `rgb(t, t-6, t-20)` with t between 190 and 245.
- **The front:** sweeps across `W + 132px` over 2.6s with quadratic ease-in-out, after a 0.2s delay.
- Every cell the front passes is stamped permanently onto an offscreen canvas, copying its 3×3px patch of the image.
- Flakes that land within the next 120px are drawn in flight. They glide from their offset to their cell with smoothstep, fade in as they approach, and spin.
- **Finish:** when the front has passed, draw the full image. On resize, just redraw the full image.
- **Fallbacks:** with reduced motion, draw the image at once. If the canvas is tainted, show the `<img>` instead.
## Link hover
On hover or focus the link turns ink-coloured and slides 5px right. A "-" dash fades in 13px to its left (from -4px), and a 1px ink underline grows from the left (0.4s).
## Mobile (≤ 760px)
- The footer goes to auto height with bottom padding equal to 80 % of the engraving's height.
- The columns become a 2-column grid with 50px top and 16px side padding and a 36px row gap. The brand spans both columns.
- Only the outer two dashed verticals stay; the horizontal line moves to 30px.
## Reduced motion
All animations run in 1ms with no delay, and the engraving is drawn immediately.
## Notes
TIDE, Tide Labs and the tagline are fictional. Don't use real brand names or logos.