Add optimized landing video asset workflow and prompt command

Inizia leggendo src/components/landing/hero.tsx, src/components/landing/water-particles.tsx, src/app/page.tsx e .claude/commands/make-command.md. Esamina il comando richiesto, i percorsi degli asset, gli aggiornamenti della documentazione e i criteri di accettazione, quindi esegui npm run lint e npx tsc --noEmit. Il lavoro è completato quando il workflow video statico, il comportamento per la riduzione del movimento, il comando, la documentazione e l’integrazione responsive dell’hero soddisfano tutti i criteri elencati, senza chiamate ai provider né chiavi API.

Summary

Add a lightweight landing-page video asset workflow to DannFlow:

1. Replace or augment the current hero visual with a sample optimized generated video asset for now.
2. Add a reusable command that generates high-quality prompts for landing-page video assets, especially 3-5 second hero/transition clips for premium sites.

This is not for live text-to-video generation on the website. The website should only ship compressed finished assets. The command should help create the prompt that the user can paste into MuAPI/Open Generative AI/Kling/etc.

Why

DannFlow already has a high-end landing page direction, but the current hero relies on a canvas particle field and a dashboard preview. For client websites, especially premium SaaS/local business pages, a short generated video can create a more Apple-style hero or scroll transition when handled carefully.

The goal is to support this workflow:

Generate master video externally -> optimize variants -> commit static assets -> render responsive video in the landing page

No API keys should be needed by the public site. No video generation should happen for visitors.

Repo context read

Relevant files/patterns:

• src/components/landing/hero.tsx currently owns the landing hero, typewriter reveal, CTA, water particles, and dashboard preview.
• src/components/landing/water-particles.tsx is the current animated canvas background.
• src/app/page.tsx composes the landing sections.
• src/app/globals.css contains the Tailwind v4 semantic tokens and animation utilities.
• .claude/commands/ is the canonical slash-command library.
• .codex/ is only a compatibility bridge and should not duplicate the command library.
• .claude/commands/make-command.md defines how new commands should be created and documented.
• .codex/commands/claude-command.md loads Claude commands from .claude/commands/.

Proposed implementation

1. Add a sample optimized landing video asset

Add a sample hero video under something like:

public/assets/landing/video/vetmed-hero-desktop.webm
public/assets/landing/video/vetmed-hero-desktop.mp4
public/assets/landing/video/vetmed-hero-mobile.webm
public/assets/landing/video/vetmed-hero-mobile.mp4
public/assets/landing/video/vetmed-hero-poster.webp

The first sample can use a veterinary clinic management system direction:

A premium cinematic landing page hero video for a veterinary clinic management system. A modern vet clinic reception desk transforms into a clean floating 3D dashboard interface showing appointments, patient records, inventory, billing, and treatment notes. Subtle holographic UI panels glide smoothly around a central tablet, with soft blue and teal medical lighting, warm clinic ambience, glassmorphism interface details, gentle depth of field, polished SaaS product commercial style. Slow camera push-in, subtle parallax, smooth controlled motion, no fast cuts, no text, no logos, no watermarks, no distorted UI, professional and trustworthy, 5 seconds, seamless loop, centered composition with generous negative space for responsive website cropping.

Asset guidance:

• 3-5 seconds.
• Muted/no audio track.
• Desktop target: 1920x1080, ideally 1.5-4 MB.
• Tablet target can reuse desktop or a 1280x720 export.
• Mobile target: vertical or mobile-safe crop, ideally under 2 MB.
• Poster: WebP/AVIF, roughly 80-200 KB.
• Keep important subject matter centered so object-fit: cover works.

2. Create a reusable landing video component

Add a component such as:

src/components/landing/hero-video.tsx

Expected behavior:

• Renders a <video> with autoplay, muted, loop, playsInline, preload="metadata", and poster.
• Uses <source media="..."> for mobile/desktop variants where browser support permits, or uses a small client component only if needed for source selection.
• Uses object-cover and a configurable object-position.
• Honors prefers-reduced-motion by showing the poster image instead of autoplaying video.
• Does not fetch anything from a provider.
• Does not require any API key.
• Uses semantic tokens only for wrappers/overlays.
• Avoids raw hex/rgba/hardcoded white/black/gray classes in className, per CLAUDE.md and /ui rules.

Suggested markup shape:

<video
  className="absolute inset-0 h-full w-full object-cover"
  autoPlay
  muted
  loop
  playsInline
  preload="metadata"
  poster="/assets/landing/video/vetmed-hero-poster.webp"
>
  <source src="/assets/landing/video/vetmed-hero-mobile.webm" type="video/webm" media="(max-width: 640px)" />
  <source src="/assets/landing/video/vetmed-hero-desktop.webm" type="video/webm" />
  <source src="/assets/landing/video/vetmed-hero-desktop.mp4" type="video/mp4" />
</video>

3. Wire the sample into the current hero

Update src/components/landing/hero.tsx to show the sample video in a safe way:

• Keep existing copy/CTA structure unless a redesign is explicitly part of the task.
• Use the video as an ambient hero background or a framed preview, whichever preserves readability.
• Keep text contrast strong with semantic-token overlays.
• Keep the current canvas particles available only if they do not compete with the video or hurt performance.
• Avoid loading heavy video below the fold.
• Ensure mobile at 375px has no horizontal scroll.

4. Add a new Claude command for landing video prompts

Create a new command in .claude/commands/, not .codex/commands/.

Suggested name:

/landing-video-prompt

Suggested purpose:

Generate a production-ready AI video prompt for a landing-page hero, section transition, product reveal, or scroll-scrubbed visual asset.

Suggested arguments:

<business/domain + scene goal + optional model/aspect/duration>

The command should output:

1. A still-image prompt for creating a controlled first frame.
2. An image-to-video prompt for animating that frame.
3. Optional text-to-video prompt if no still image will be used.
4. Negative prompt / avoid list.
5. Recommended model settings:
   • Prefer Image-to-Video for controlled website assets.
   • For Kling/MuAPI: recommend kling-v3-turbo-pro-image-to-video for final 1080p assets and kling-v3-turbo-standard-image-to-video for drafts.
   • Duration: 3-5 seconds.
   • Composition: centered subject, generous crop-safe space, no text/logos/watermarks.
6. Web export checklist:
   • desktop WebM + MP4
   • mobile WebM + MP4 when crop needs it
   • poster WebP/AVIF
   • remove audio
   • target size budgets

Hard constraints for the command:

• It should not call any AI video API.
• It should not ask for API keys.
• It should create prompts only.
• It should remind the user that finished assets should be optimized before committing.
• It should fit DannFlow command style and update docs according to .claude/commands/make-command.md:
  • .claude/commands/README.md
  • docs/dannflow_docs/claude-workflow.md
  • SKILLS.md only if the video skill recommendation needs to be surfaced

5. Add asset optimization docs/script

Add documentation, and optionally a small script, for compressing generated master videos.

Suggested doc:

docs/dannflow_docs/landing-video-assets.md

Suggested commands:

# Desktop WebM
ffmpeg -i master.mp4 -an -vf "scale=1920:-2,fps=24" \
  -c:v libvpx-vp9 -crf 34 -b:v 0 -row-mt 1 \
  public/assets/landing/video/vetmed-hero-desktop.webm

# Desktop MP4 fallback
ffmpeg -i master.mp4 -an -vf "scale=1920:-2,fps=24" \
  -c:v libx264 -crf 24 -preset slow -movflags +faststart \
  public/assets/landing/video/vetmed-hero-desktop.mp4

# Poster
ffmpeg -i master.mp4 -ss 00:00:01 -vframes 1 \
  -vf "scale=1600:-2" \
  public/assets/landing/video/vetmed-hero-poster.webp

Acceptance criteria

• A sample optimized landing video/poster exists under public/assets/landing/video/.
• The landing hero can render the sample video without needing any API key or provider call.
• Video uses muted, playsInline, loop, a poster image, and safe preload behavior.
• Reduced-motion users see a static poster or non-autoplay fallback.
• Mobile, tablet, and desktop layouts work without horizontal scroll.
• No public API key or provider secret is introduced.
• New command exists in .claude/commands/landing-video-prompt.md.
• Codex can access the command through /claude-command landing-video-prompt ... without duplicating it into .codex.
• Command docs are updated in .claude/commands/README.md and docs/dannflow_docs/claude-workflow.md.
• The implementation passes npm run lint and npx tsc --noEmit.

Notes

This should be implemented as static asset support and prompt tooling. Live generation belongs outside the visitor-facing website.