Free
🛬 Landing Page

Orbit 404 Page

A characterful 404 page: a lost satellite orbits a planet with a star parallax field and a way-home CTA.

8 views 0 copies 273 từ

Nội dung prompt

# Orbit 404 Page — UI Component

## Goal
Build a self-contained 404 page component: deep-space scene with an orbiting satellite, 'lost in space' copy and a back-home action. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Scene: full-viewport near-black #05060A; a soft planet sphere lower-left (radial-gradient, subtle rim glow); a satellite tracing an elliptical orbit around it.
- Star field: 3 depth layers of tiny stars (generated spans, not images) at different opacities and parallax speeds.
- Copy block: giant '404' in 160px outline stroke (transparent fill, 1px neon stroke), headline 'Signal lost.', one warm sub-line — humor, not blame.
- Actions: solid 'Back to Earth' home button + ghost 'Retry' that reloads the intended URL if provided via prop.
- Micro-detail: an occasional shooting star streaks across (transform only), randomized 6-12s intervals.

## Motion Spec
- Orbit: satellite follows an ellipse via two synced sin/cos transforms, 14s per revolution, slight scale (near/far depth).
- Star layers shift with cursor up to 6px (desktop), disabled on touch and reduced-motion.
- Copy enters with 100ms stagger; '404' stroke draws in via SVG dash if implemented as SVG, else fade-in.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<NotFound homeHref retryUrl? stars?={{density}} />` — renders nothing outside its own full-screen container.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.

Có thể bạn cũng thích

Verified DR - Verified Domain Rating for buildpromptkit.comBuildPromptKit - AI prompts that ship real UI — every one has a live demo | Product HuntBuildPromptKit — AI Website & App Prompts - Featured on YizhanFeatured on saasfame.comFeatured on Twelve Tools