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 слов
Промпт
# 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.
Вам также может понравиться
Free
Featured
Vectrus Energy
🛬 Landing Page
Scroll-tied cinematic section: a 500vh track scrubs an aerial clip frame by frame through a WebCodecs frame bank, with three sequential copy blocks.
4.9k 535CursorClaude CodeLovable
Free
Magnetic CTA Cluster
✨ Creative
Buttons that pull toward the cursor within a radius, with the label lagging behind the shell for weight.
3.9k 710CursorClaude CodeLovable
Free
Conversion CTA Banner
🛬 Landing Page
Pre-footer CTA banner with animated gradient border, urgency-free copy structure and dual action hierarchy.
4.3k 827CursorClaude CodeLovable
Free
Pulsewave Festival
🛬 Landing Page
Electronic music festival site with neon glow, chromatic display type, lineup marquees and a ticket-tier countdown.
3.6k 653CursorClaude CodeLovable