AI 编程(UI)MotionSites证据 L1#source-motionsites #prompt-public #not-rerun #license-review

Stark Minimal Footer

Prompt

---

Build a **Site Footer** for an aerospace company called "EngineTech." This is a black-background footer with an animated dotted top border, a four-column nav grid with a large heading, an oversized wordmark brand row, and a legal line.

---

## ROOT CONTAINER (`.site-footer`)

- Position relative, z-index 100, overflow hidden.
- Background: `#000000`. Color: `#ffffff`.

---

## ANIMATED DOTS STRIP (`.footer-dots`)

A decorative band at the very top of the footer with horizontally drifting dots.

- Position relative, height 120px, overflow hidden, background `#000000`.
- Has `aria-hidden="true"`.

**Inside (`.footer-dots__line`):**

- Position absolute, `left: 0; top: 50%`. Width **200%**, height 70px.
- Opacity 0.75. `transform: translateY(-50%)`.
- Background-image (three layered radial-gradient dot patterns):
  - `radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px)`
  - `radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px)`
  - `radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px)`
- Background-position: `0 8px, 24px 22px, 48px 14px`.
- Background-size: `72px 38px, 110px 44px, 160px 52px`.
- Animation: `footerDotsMove 18s linear infinite`.

**Keyframes:**

```
@keyframes footerDotsMove {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(-50%, -50%, 0); }
}
```

---

## FOOTER INNER (`.site-footer__inner`)

- Width: `min(100% - 96px, var(--hero-max-width))` where `--hero-max-width: 1820px`. Margin `0 auto`.
- Padding: `clamp(34px, 4vw, 66px) 0 clamp(18px, 2vw, 34px)`.

---

## TOP GRID (`.site-footer__top`)

- Display grid. Columns: `minmax(320px, 1.25fr) repeat(3, minmax(150px, 0.42fr))`.
- Gap: `clamp(28px, 4vw, 76px)`. Min-height: `clamp(220px, 24vw, 330px)`.

### H2 (first cell)

- Text: "Proven Advanced Propulsion Technology".
- Max-width 680px, margin 0, color `#ffffff`, `font-size: clamp(34px, 3.5vw, 62px)`, weight 220, letter-spacing 0, line-height 1.06.

### Nav columns (three `.site-footer__nav` elements)

Each nav is `display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.35vw, 22px)`.

Each link `<a>`:
- Color `rgb(255 255 255 / 0.88)`, font-size 16px, weight 650, line-height 1.1.
- Transition: `color 180ms ease, transform 180ms ease`.
- Hover: color `#ffffff`, `transform: translateX(3px)`.

**Nav 1 (`aria-label="Footer navigation"`):**
- Company → `#company`
- Technology → `#technology`
- Solutions → `#solutions`
- Our Edge → `#our-edge`
- Investors → `#investors`

**Nav 2 (`aria-label="Company links"`):**
- Our Team → `#our-team`
- News → `#news`
- Careers → `#careers`
- Contact Us → `#contact`

**Nav 3 (`aria-label="Social links"`):**
- LinkedIn → `https://www.linkedin.com` (`target="_blank" rel="noreferrer"`)
- Follow Us on X → `https://x.com` (`target="_blank" rel="noreferrer"`)

---

## BRAND ROW (`.site-footer__brand-row`)

- Width 100%. Margin-top: `clamp(18px, 3vw, 46px)`.

**Brand link (`.site-footer__brand`):**

- Anchor `href="/"`, `aria-label="EngineTech home"`.
- Display flex, align-items center, width 100%, color `#ffffff`.

**Brand mark (`.site-footer__mark`):**

- Position relative, `flex: 0 0 clamp(58px, 6.1vw, 118px)`, `aspect-ratio: 1`.
- Margin-right `clamp(14px, 1.6vw, 28px)`. Overflow hidden, border-radius 50%.
- Background `#ffffff`.
- `::before` pseudo: absolute `inset: -18%`, background `#000000`, with `clip-path: polygon(0 20%, 100% 8%, 100% 19%, 0 31%, 0 43%, 100% 31%, 100% 42%, 0 54%, 0 66%, 100% 54%, 100% 65%, 0 77%)`. This creates a zig-zag wave pattern inside the white circle.
- Has `aria-hidden="true"`.

**Brand wordmark (second `<span>`):**

- Text: "EngineTech".
- Display block, `flex: 1 1 auto`, min-width 0.
- `font-size: clamp(58px, 11.1vw, 214px)`. Weight 760. `letter-spacing: -0.055em`. Line-height 0.78.
- `white-space: nowrap`.

---

## LEGAL LINE (`.site-footer__legal`)

- Flex row, wrap allowed, justify-content flex-start, gap `8px 18px`.
- Margin-top: `clamp(14px, 1.4vw, 24px)`.
- Color `rgb(255 255 255 / 0.52)`, font-size 9px, line-height 1.35.

Contents:
- `<p>`: "© 2026 EngineTech. All rights reserved." (margin 0)
- `<a href="#privacy">`: "Privacy Policy" (color inherit, hover `#ffffff`)
- `<a href="#terms">`: "Terms of Use" (same styling)

---

## RESPONSIVE BREAKPOINTS

**At 980px:**

- `.site-footer__inner` width: `min(100% - 48px, var(--hero-max-width))`.
- Top grid: `grid-template-columns: 1fr 1fr` (two columns).
- H2 spans full width: `grid-column: 1 / -1`.

**At 560px:**

- `.site-footer__inner` width: `min(100% - 32px, var(--hero-max-width))`.
- Top grid: single column (`grid-template-columns: 1fr`). Min-height auto.
- Nav links font-size 15px.
- Brand mark flex-basis: `clamp(38px, 12vw, 58px)`.
- Brand wordmark font-size: `clamp(45px, 18vw, 84px)`.

---

## GLOBAL STYLES

**CSS custom property used:** `--hero-max-width: 1820px`.

**Font stack:** `"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` with `-webkit-font-smoothing: antialiased` and `text-rendering: geometricPrecision`.

**Anchor reset:** `a { color: inherit; text-decoration: none; }`.

**Color palette:** No purple or violet. Pure black `#000000` background, pure white `#ffffff` text, with `rgb(255 255 255 / 0.88)` for nav links, `rgb(255 255 255 / 0.55)` / `0.45` / `0.35` for the dot pattern, and `rgb(255 255 255 / 0.52)` for legal text.

复用方法

关键决定

观察最终结果里，页面信息层级、模块顺序和 CTA 是否一口气讲清楚是否同时成立。

换到你的题材

把“目标结果 → 产品名称、目标用户、页面模块和主按钮 → 约束条件”抽成模板，后续可复用到同类任务。

容易翻车

围绕模块顺序、价值主张写法与 CTA 位置做单变量对照，并记录模型、成本和失败结果；重复成立后再沉淀为 Skill。

建议模型

待补充模型

稳定度
成本: 中

Derived Skill

这个 Case 可以学走的方法。

Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。

通用 Skill落地页信息结构查看证据 →

创作者

MotionSites

MotionSites 长期扎根MotionSites，交付可运行的界面，《Modern Agency》配了完整实现思路。

值得学习AI 编程(UI)

查看创作者 →

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →

AI 编程(UI)X@Oluwaphilemon1 →

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度

稳定度

查看 Case →

AI 编程(UI)Aceternity UIAceternity UI →

3D Animated Pin

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName, }: { children: React.ReactNode; title?: string; href?: string; className?: string; containerClassName?: string; }) => { const [transform, setTransform] = useState( "translate(-50%,-50%) rotateX(0deg)" ); const onMouseEnter = () => { setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)"); }; const onMouseLeave = () => { setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)"); }; return ( <a className={cn( "relative group/pin z-50 cursor-pointer", containerClassName )} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} href={href || "/"} > <div style={{ perspective: "1000px", transform: "rotateX(70deg) translateZ(0deg)", }} className="…

Skill · 3D / 动效 Hero

提示语

来源热度

—

稳定度

查看 Case →

AI 编程(UI)MotionSitesMotionSites →

3D Collectible Hero

Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4d…

Skill · 3D / 动效 Hero Skill · 落地页信息结构

提示语

来源热度

—

稳定度

查看 Case →

Stark Minimal Footer

MO创作者MotionSites →

查看原始来源 ↗

--- Build a **Site Footer** for an aerospace company called "EngineTech." This is a black-background footer with an animated dotted top border, a four-column nav grid with a large heading, an oversized wordmark brand row, and a legal line. --- ## ROOT CONTAINER (`.site-footer`) - Position relative, z-index 100, overflow hidden. - Background: `#000000`. Color: `#ffffff`. --- ## ANIMATED DOTS STRIP (`.footer-dots`) A decorative band at the very top of the footer with horizontally drifting dots. - Position relative, height 120px, overflow hidden, background `#000000`. - Has `aria-hidden="true"`. **Inside (`.footer-dots__line`):** - Position absolute, `left: 0; top: 50%`. Width **200%**, height 70px. - Opacity 0.75. `transform: translateY(-50%)`. - Background-image (three layered radial-gradient dot patterns): - `radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px)` - `radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px)` - `radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px)` - Background-position: `0 8px, 24px 22px, 48px 14px`. - Background-size: `72px 38px, 110px 44px, 160px 52px`. - Animation: `footerDotsMove 18s linear infinite`. **Keyframes:** ``` @keyframes footerDotsMove { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } } ``` --- ## FOOTER INNER (`.site-footer__inner`) - Width: `min(100% - 96px, var(--hero-max-width))` where `--hero-max-width: 1820px`. Margin `0 auto`. - Padding: `clamp(34px, 4vw, 66px) 0 clamp(18px, 2vw, 34px)`. --- ## TOP GRID (`.site-footer__top`) - Display grid. Columns: `minmax(320px, 1.25fr) repeat(3, minmax(150px, 0.42fr))`. - Gap: `clamp(28px, 4vw, 76px)`. Min-height: `clamp(220px, 24vw, 330px)`. ### H2 (first cell) - Text: "Proven Advanced Propulsion Technology". - Max-width 680px, margin 0, color `#ffffff`, `font-size: clamp(34px, 3.5vw, 62px)`, weight 220, letter-spacing 0, line-height 1.06. ### Nav columns (three `.site-footer__nav` elements) Each nav is `display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.35vw, 22px)`. Each link `<a>`: - Color `rgb(255 255 255 / 0.88)`, font-size 16px, weight 650, line-height 1.1. - Transition: `color 180ms ease, transform 180ms ease`. - Hover: color `#ffffff`, `transform: translateX(3px)`. **Nav 1 (`aria-label="Footer navigation"`):** - Company → `#company` - Technology → `#technology` - Solutions → `#solutions` - Our Edge → `#our-edge` - Investors → `#investors` **Nav 2 (`aria-label="Company links"`):** - Our Team → `#our-team` - News → `#news` - Careers → `#careers` - Contact Us → `#contact` **Nav 3 (`aria-label="Social links"`):** - LinkedIn → `https://www.linkedin.com` (`target="_blank" rel="noreferrer"`) - Follow Us on X → `https://x.com` (`target="_blank" rel="noreferrer"`) --- ## BRAND ROW (`.site-footer__brand-row`) - Width 100%. Margin-top: `clamp(18px, 3vw, 46px)`. **Brand link (`.site-footer__brand`):** - Anchor `href="/"`, `aria-label="EngineTech home"`. - Display flex, align-items center, width 100%, color `#ffffff`. **Brand mark (`.site-footer__mark`):** - Position relative, `flex: 0 0 clamp(58px, 6.1vw, 118px)`, `aspect-ratio: 1`. - Margin-right `clamp(14px, 1.6vw, 28px)`. Overflow hidden, border-radius 50%. - Background `#ffffff`. - `::before` pseudo: absolute `inset: -18%`, background `#000000`, with `clip-path: polygon(0 20%, 100% 8%, 100% 19%, 0 31%, 0 43%, 100% 31%, 100% 42%, 0 54%, 0 66%, 100% 54%, 100% 65%, 0 77%)`. This creates a zig-zag wave pattern inside the white circle. - Has `aria-hidden="true"`. **Brand wordmark (second `<span>`):** - Text: "EngineTech". - Display block, `flex: 1 1 auto`, min-width 0. - `font-size: clamp(58px, 11.1vw, 214px)`. Weight 760. `letter-spacing: -0.055em`. Line-height 0.78. - `white-space: nowrap`. --- ## LEGAL LINE (`.site-footer__legal`) - Flex row, wrap allowed, justify-content flex-start, gap `8px 18px`. - Margin-top: `clamp(14px, 1.4vw, 24px)`. - Color `rgb(255 255 255 / 0.52)`, font-size 9px, line-height 1.35. Contents: - `<p>`: "© 2026 EngineTech. All rights reserved." (margin 0) - `<a href="#privacy">`: "Privacy Policy" (color inherit, hover `#ffffff`) - `<a href="#terms">`: "Terms of Use" (same styling) --- ## RESPONSIVE BREAKPOINTS **At 980px:** - `.site-footer__inner` width: `min(100% - 48px, var(--hero-max-width))`. - Top grid: `grid-template-columns: 1fr 1fr` (two columns). - H2 spans full width: `grid-column: 1 / -1`. **At 560px:** - `.site-footer__inner` width: `min(100% - 32px, var(--hero-max-width))`. - Top grid: single column (`grid-template-columns: 1fr`). Min-height auto. - Nav links font-size 15px. - Brand mark flex-basis: `clamp(38px, 12vw, 58px)`. - Brand wordmark font-size: `clamp(45px, 18vw, 84px)`. --- ## GLOBAL STYLES **CSS custom property used:** `--hero-max-width: 1820px`. **Font stack:** `"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` with `-webkit-font-smoothing: antialiased` and `text-rendering: geometricPrecision`. **Anchor reset:** `a { color: inherit; text-decoration: none; }`. **Color palette:** No purple or violet. Pure black `#000000` background, pure white `#ffffff` text, with `rgb(255 255 255 / 0.88)` for nav links, `rgb(255 255 255 / 0.55)` / `0.45` / `0.35` for the dot pattern, and `rgb(255 255 255 / 0.52)` for legal text.