Prompts

NOCTIS full-screen dark cinematic hero with video background, nav, and timecode details

NOCTIS full-screen dark cinematic hero with video background, nav, and timecode details. Stack: React, TypeScript, Vite, CSS. Copy-ready Claude website and UI prompt with layout, motion, and implementation notes from the Eldergenix prompt directory.

UI / UX promptsAnthropicReact, TypeScript, Vite, CSS

Repository ↗

Example output

Demo

Prompt

Anthropic

# Noctis — Cinematic Hero Section

## Overview

Create a full-screen, dark hero section with a cinematic, premium aesthetic.

## Background Video

The hero uses a single background video:

`https://res.cloudinary.com/dfonotyfb/video/upload/v1775585556/DDS3_1_RQHG7X.MP4`

Implement it exactly as specified:

```tsx
<video autoPlay loop muted playsInline className="absolute inset-0 w-full h-full object-cover z-0">
  <source src="https://res.cloudinary.com/dfonotyfb/video/upload/v1775585556/DDS3_1_RQHG7X.MP4" type="video/mp4" />{" "}
</video>
```