kling-motion-web-p

---
name: kling-motion-web-p
description: "Use when building luxury landing pages with Kling image-to-video AI, GPT Image stills, pinned 'stop scroll' scenes, and scroll-driven frame sequences. Requires FAL_KEY env var (fal.ai) — ask user before any call."
source: https://fal.ai/models/fal-ai/kling-video
generated: 2026-05-07T20:57:38.203Z
category: tool
audience: creators
---

## Tutorials

- https://skillmake.xyz/v/kling-motion-web-p.mp4

## When to use

- Before any Kling/fal call: confirm FAL_KEY is set; if missing, stop and ask the user to set it (https://fal.ai/dashboard/keys) — do not silently fall back to another model
- Luxury or agency-style landing pages where motion sells the product
- Pinned 'stop scroll' storytelling sections with scroll-scrubbed video or frame sequences
- 3D product or architecture hero scenes (rotating globes, space stations, exploded views)
- AI-generated hero assets — GPT Image stills + Kling image-to-video — integrated as hero or sequence

## Key concepts

### FAL_KEY (required)

Every Kling generation goes through fal.ai, which authenticates via the FAL_KEY env var. The @fal-ai/client picks it up from process.env.FAL_KEY automatically; otherwise call fal.config({ credentials: process.env.FAL_KEY }). Before any generation step, verify FAL_KEY is set — if missing, halt and ask the user to grab one at https://fal.ai/dashboard/keys and export it. Never hard-code the key, never check it into source, and never silently substitute a different provider.

### stop scroll

A pinned/sticky storytelling section with extra parent height (250–400vh). The visual stage stays sticky at top:0 while scroll progress drives the animation. Text beats fade or translate in sequence as the asset frame changes. Always ship a reduced-motion fallback that stacks a still frame and the text vertically.

### Kling image-to-video

Generates short cinematic motion — hero loops, rotating objects, exploded views — from a single still. Prefer model id fal-ai/kling-video/v3/standard/image-to-video. Use it only when a still needs believable motion, camera movement, or stable rotation; not for primary content.

### scroll-scrubbed sequence

Drive video.currentTime from scroll progress for prototypes, or extract optimized JPEG/WebP frames and map frame index to scroll for production. Pause the video — never autoplay or loop a scroll-driven hero. Preload nearby frames and size them consistently so scrolling never causes layout shift.

### asset masking

Inward gradient masks blend the asset into the page background. Use the lightest mask that preserves text readability — heavy dark radials make product media look blurry or muddy. Match asset background to page background; otherwise strengthen top/bottom/side masks until no dividing band is visible.

### GPT Image source still

Generate source frames locally in Codex with the configured OpenAI GPT Image model (gpt-image-2 if exposed, else gpt-image-1.5 for quality or gpt-image-1-mini for cost). Kling adds motion afterward — never use Kling as the source-image step.

### fal canvas normalization

fal/Kling rejects images below its minimum dimensions. Pad small or oddly-shaped stills onto a 1280x720 or 1024x1024 canvas before upload. When using start_image_url + end_image_url, keep both images at identical dimensions and aspect ratio.

## API reference

```
FAL_KEY precondition (run first)
```

Before invoking any Kling/fal endpoint, fail fast when FAL_KEY is missing and surface a copy-pasteable instruction. Ask the user instead of silently degrading or switching models.

```
if (!process.env.FAL_KEY) {
  throw new Error(
    'FAL_KEY is required for Kling generation.\n' +
    'Get one at https://fal.ai/dashboard/keys, then:\n' +
    '  export FAL_KEY=fal-...'
  );
}
import { fal } from '@fal-ai/client';
fal.config({ credentials: process.env.FAL_KEY });
const result = await fal.subscribe(
  'fal-ai/kling-video/v3/standard/image-to-video',
  { input: { prompt, image_url } }
);
```

```
<video autoplay muted loop playsinline>
```

Standard hero-loop tag for Kling-generated 5-second cinematic videos with stable center mass.

```
<video
  autoplay
  muted
  loop
  playsinline
  src="/hero.mp4"
  class="hero-video"
></video>
```

```
Pinned scroll-scrubbed hero (sticky child + 180–240svh parent)
```

Wrap a sticky child in a taller parent so scroll progress can advance video.currentTime. Pause the video and set currentTime from progress — never autoplay or loop a scroll-driven hero.

```
<div style="min-height: 200svh">
  <div class="sticky top-0 h-screen">
    <video id="hero" muted playsinline preload="auto" src="/hero.mp4"></video>
  </div>
</div>
<script>
  const v = document.getElementById('hero');
  v.pause();
  const update = () => {
    const t = window.scrollY / (document.body.scrollHeight - innerHeight);
    if (v.duration) v.currentTime = v.duration * Math.min(Math.max(t, 0), 1);
  };
  v.addEventListener('loadedmetadata', update);
  window.addEventListener('scroll', update, { passive: true });
</script>
```

```
fal-ai/kling-video/v3/standard/image-to-video
```

Default model id for API-based Kling 3.0 image-to-video generation. Pass start_image_url for static-to-motion; add end_image_url when the model supports start-to-end reveals.

```
@media (prefers-reduced-motion: reduce)
```

Reduced-motion fallback: collapse the pinned hero, hide the video, and reveal a still fallback frame so the page is usable without scroll-driven animation.

```
@media (prefers-reduced-motion: reduce) {
  .scroll-hero { min-height: auto; }
  .scroll-hero .sticky-stage { position: static; height: auto; }
  .scroll-hero video { display: none; }
  .scroll-hero .fallback-still { display: block; }
}
```

## Gotchas

- FAL_KEY env var is required for every Kling/fal call. If it isn't set, stop and ask the user to set it (https://fal.ai/dashboard/keys) before retrying — never silently fall back to a different model.
- Never hard-code FAL_KEY or commit it. Read from process.env.FAL_KEY only; treat it like any other API secret.
- Heavy dark radial overlays make product media look muddy — use the lightest mask that preserves readability, and remove overlays entirely when inspecting the video.
- fal/Kling rejects images below its minimum dimensions; pad small or oddly-shaped stills onto a 1280x720 or 1024x1024 canvas before upload.
- Scroll-driven heroes must not autoplay or loop — pause the video and set currentTime from scroll progress.
- When using start_image_url + end_image_url, both images must have identical dimensions and aspect ratio.
- Test through a local HTTP server, not file://, when the site uses video, local APIs, or non-default MIME types.
- If the user asks to remove text, remove the DOM elements and JS references — don't just opacity:0 them.
- Match asset background to page background; otherwise strengthen top/bottom/side masks until no dividing band is visible.

---
Generated by SkillMake from https://fal.ai/models/fal-ai/kling-video on 2026-05-07T20:57:38.203Z.
Verify against source before relying on details.

File: ~/.claude/skills/kling-motion-web-p/SKILL.md