← All resourcesTR
127October 8, 2026·6 items

An animated website with Claude: a cinematic landing page in 3 steps with a template, a video and one prompt

A video that plays as you scroll, glass cards on top, headings that reveal word by word. Sites like this now come out without writing code: you take a ready made site prompt, generate your own video, drop its link into the prompt and give it to Claude. Below: each of the three steps, plus ready to use image, video and site prompts. And the parts that usually get skipped: which step needs a paid account, why a wrongly copied video link leaves the site blank, and what it takes to go from prototype to a live site.

Web TasarımVideoPrompt

The tools you will use

There are three tools: motionsites.ai for the template, Higgsfield (from inside ChatGPT) for the video, and Claude for the site. If you want to skip the template part, you can use the site prompt below directly; part of the motionsites.ai library sits behind a paid plan.

What is extra below: ready made image, video and site prompts, how to copy the video link correctly, which step needs a paid account, and what it takes to move the site from prototype to live.

motionsites.ai

The flow

From image to site

  1. 1

    Template

    Pick a ready made site prompt, paste it into your notes

  2. 2

    Image

    Generate one scene that fits the site, or use your own photo

  3. 3

    Video

    Turn the image into a few seconds of camera motion with Higgsfield, copy its link

  4. 4

    Site

    Put the link into the prompt, tell Claude what you want, paste the prompt

Step 1: Prepare the image

This image sets the quality of the video. If you have your own product photo or location, use that. Otherwise generate one in ChatGPT or any image model with the prompt below. I built a site about temple architecture, so I used a temple as the subject. The core idea stays the same: time is frozen, pieces hang in the air, and the scene opens up as the camera moves in.

Image prompt (replace <SUBJECT> with your subject)
Create a cinematic 16:9 image in an Arcane-inspired animation style featuring <SUBJECT> standing firmly on the ground in a powerful heroic pose. The scene should feel like the middle of an intense action sequence where time has suddenly frozen.

Around <SUBJECT>, dust, debris, sparks, cloth fragments and other elements are suspended in mid-air, frozen in motion. Everything around is paused mid-action while <SUBJECT> remains calm, grounded and dominant.

The lighting should be dramatic, with golden highlights, deep shadows, flying particles and a strong sense of motion frozen in time. The mood should feel epic and visually intense, like a high-budget animated scene.

Generate the image in 16:9. The site background is landscape; a video made from a square or vertical image gets cropped to fill the screen and half your subject disappears.

Step 2: Generate the video

In ChatGPT, open the Apps section, find Higgsfield and connect it. Besides your ChatGPT account it needs a Higgsfield account; no API key. Then upload the image and describe what you want. You can do the same on Higgsfield's own site; Seedance works well as the model there.

Video prompt
Create a video where the original picture, character and subject remain exactly the same. The scene should feel like a dramatic mid-action freeze-frame moment. The camera slowly zooms in toward the main subject, revealing the entire frozen scene around it. As the zoom progresses, show all the objects, dust, debris and action elements suspended in mid-air, as if time has suddenly stopped.

The focus should stay on the main subject, while everything around it is frozen in motion. The camera movement should feel cinematic, intense and immersive, ending on a powerful close-up of the subject.

I simply told ChatGPT "create a 3D motion of the temple", and that was enough. The long prompt helps when you want tighter control over the camera move.

Copying the video link correctly

Copying the link of the chat or share page

Click the video, choose "open video" and take the link from the address bar of the new tab. That is the video file itself

Assuming the link works

Open the link in a private window. If the video does not play on its own, it will not play on the site either; the background stays black

Step 3: Build the site

Open Claude, first say in one sentence what you want to build ("a showcase site about temple architecture"), then paste the template prompt. Do not forget to swap the template's video link for yours; in the prompt below that spot is marked VIDEO_URL.

Where to run it

Claude Design

For refining the design by chatting

  • Anthropic's design and prototyping tool
  • Available on Pro, Max, Team and Enterprise plans
  • Edit by chatting, export as a link or PDF, hand off to Claude Code

Regular Claude chat

For a quick try on a free account

  • The same prompt works here too; the result opens as an artifact
  • Works on a free account too
  • You can copy the code into your own project
Site prompt (fill in BRAND_NAME, THEME and VIDEO_URL)
Create a React + Vite + Tailwind CSS v4 landing page for BRAND_NAME, a premium website about THEME. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.

Background video: VIDEO_URL

GLOBAL SETUP
vite.config.ts: Use @tailwindcss/vite plugin + @vitejs/plugin-react. Alias @ to project root.
src/index.css: import Manrope and JetBrains Mono from Google Fonts, then @import "tailwindcss", and set --font-sans and --font-mono in @theme.
Define keyframe animations: flyOutRight / flyInLeft (250% translateX, 0.5s) for arrow button hover, and flyOutUp / flyInUp (150% translateY, 0.4s) for nav text hover. All use cubic-bezier(0.4, 0, 0.2, 1) easing with forwards fill mode.

COMPONENT: ScrollReveal. A GSAP-powered word-by-word scroll reveal with three ScrollTrigger animations (rotation from baseRotation to 0, opacity from baseOpacity to 1 with 0.05 stagger, blur from blurStrength to 0px).
COMPONENT: Reveal. A motion.div wrapper for viewport-triggered fade-in with easing [0.16, 1, 0.3, 1].
COMPONENT: NavItem. Hover-animated navigation link with vertical text fly animation using a cycle counter pattern.

SCROLL-DRIVEN VIDEO (CRITICAL)
Use a video.seeking guard inside the scroll handler. Without it, rapid scroll events queue up competing currentTime assignments causing visible frame tearing. Map scroll fraction from 0 (top) to 1 (when footer is 20% of viewport from top). The video must be muted and playsInline.

LAYER STRUCTURE
1. Fixed video background (fixed inset-0 z-0 bg-black) with object-fit: cover.
2. Fixed header (z-20) that slides up out of view between 500px and 800px of scroll.
3. Scrollable content (relative z-10 pointer-events-none) with pointer-events-auto on interactive areas.

SECTION 1: HERO. 12-col grid. A short, bold headline about THEME bottom-left at clamp(2.5rem, 6vw, 5rem). Description paragraph center-right with max-w-[460px]. Two-part CTA button (text + arrow) with white/8 backdrop-blur-[80px], turning solid white on hover.
SECTION 2: ScrollReveal heading + 3-column feature grid.
SECTION 3: FOOTER. Glassmorphism card with rgba(26,26,26,0.6), backdrop-blur 80px, border rgba(255,255,255,0.1). Top CTA + 4-col footer grid (Brand, Company, Services, Connect) + copyright bar.

DESIGN TOKENS
Pure black background. Text in white, white/64, white/40. Glass: #1A1A1A at 40% opacity, blur 80px. Container 90% of viewport width with clamp-based spacing.

Keep the scroll-driven video background, glassmorphism footer and cinematic dark aesthetic intact.

I paid attention to two things in the prompt. There is no 3D model on the page, so no extra libraries like model-viewer; only the dependencies it needs. And the video must be muted and playsInline; without that, phone browsers do not start the video and the background stays black.

What you should know

Expectation and reality

Completely free

The prompts are free. Video generation spends Higgsfield credits, part of the motionsites.ai library is paid, and Claude Design needs a paid plan; on a free account a regular Claude chat does the job

No developer needed at all

True for the design and first version. Putting it live on your own domain, making forms work and moving the video to your own hosting are separate jobs; Claude Code can do those too, but someone has to drive it

Do not leave the video on someone else's server

For a prototype the Higgsfield link is fine. If you are really putting the site live, download the video and put it inside your own project. The link on the generation platform is not under your control; if it changes or gets removed, your site's background quietly turns black one day.

DOA: Yapay Zeka ve Otomasyon

Installing these tools on your own is one thing; actually building with them is another. The community has people using these daily and people building systems from scratch.

DOA: Yapay Zeka ve Otomasyon

If you want a system that actually runs in your business, let's talk for 10 minutes; I'll look at what you're trying to build and tell you which path fits. Free, and not a sales pitch.

Book a 10-minute call

If you'd rather learn this alongside people doing the same work instead of on your own, the community is always open:

Join the community

This is an affiliate link.

← All resources