9a58a03284
* feat(context): Add project intelligence system - Add project-intelligence.md standard (what & why) - Add project-intelligence-management.md guide (how to manage) - Add project-intelligence/ folder with 6 context files: - navigation.md (quick overview & routes) - business-domain.md (business context, users, value) - technical-domain.md (stack, architecture, decisions) - business-tech-bridge.md (business → technical mapping) - decisions-log.md (decision history with context) - living-notes.md (active issues, debt, questions) - Update standards navigation with new entries - Register all new contexts in registry.json This enables projects to document and maintain business + technical context for quick onboarding and lasting project understanding. * fix(registry): Add project-intelligence to profiles - Add context:project-intelligence/* to developer, business, full, and advanced profiles - Ensures project intelligence contexts are included when these profiles are selected This complements commit c731328 which added the context entries. * docs(core): refine project intelligence system and deprecate legacy context * feat(claude): simplify Claude Code integration with unified installer - Create single install-claude.sh script that auto-converts and installs - Remove redundant bootstrap-install.sh and install.sh scripts - Delete stale plugin/ directory (now auto-generated from .opencode/) - Add Claude Code documentation (agent-skills, create-subagents, hooks, plugins) - Add installation profiles (essential, developer, business, full, advanced) - Update README with Claude Code beta feature documentation - Add component-planning.md workflow context - Clean up demo files (assets/, src/) - Update registry with new context entries - Add gitignore rule for converter/generated/ The new installer: - Converts agents automatically from .opencode/agent/ - Installs fresh converted agents to ~/.claude/plugins/ - Single command: ./integrations/claude-code/install-claude.sh * fix: update README to use new install-claude.sh script The Claude Code integration now uses the unified install-claude.sh script instead of the removed bootstrap-install.sh and install.sh scripts. * fix(context): Add frontmatter to context files with missing metadata - Add YAML frontmatter with description to system-builder-templates - Add frontmatter to ui/web/design context files - Fixes validation warnings in validate-component.sh * fix(registry): Remove orphaned context entries for deleted files - Remove copywriting-frameworks entry (file moved to content-creation/principles/) - Remove tone-voice entry (file moved to content-creation/principles/)
213 lines
6.3 KiB
Markdown
213 lines
6.3 KiB
Markdown
---
|
|
description: "AI prompts for generating start/end frames and video sequences for scrollytelling"
|
|
---
|
|
|
|
# Lookup: Scroll Animation Image Generation Prompts
|
|
|
|
**Purpose**: AI prompts for generating start/end frames and video sequences for scrollytelling
|
|
|
|
**Last Updated**: 2026-01-07
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
Use these prompts with nano banana, Runway, Pika, or other AI tools to create image sequences for scroll animations.
|
|
|
|
**Workflow**: Start frame → End frame → Video interpolation → Frame extraction
|
|
|
|
---
|
|
|
|
## Start Frame Prompts
|
|
|
|
### Product Hero Shot
|
|
|
|
```
|
|
Ultra-premium product photography of [PRODUCT NAME] placed on a matte black
|
|
surface, minimalistic studio photoshoot. Deep black background (#050505) with
|
|
subtle gradient falloff, soft rim lighting outlining edges, controlled
|
|
reflections on smooth textures. Cinematic lighting, high contrast, luxury tech
|
|
aesthetic, sharp focus, shallow depth of field. No clutter, no text, no logos
|
|
emphasized. Shot with professional DSLR, 85mm lens, f/1.8, ultra-high
|
|
resolution, photorealistic, Apple-level product shoot, dramatic mood, modern
|
|
and elegant.
|
|
```
|
|
|
|
**Variables**: Replace [PRODUCT NAME] with your product
|
|
**Output**: Starting position, fully assembled, hero angle
|
|
|
|
---
|
|
|
|
### Variations by Product Type
|
|
|
|
| Product Type | Additional Details |
|
|
|--------------|-------------------|
|
|
| **Headphones** | "over-ear headphones with leather cushions and metal headband" |
|
|
| **Smartphone** | "smartphone with edge-to-edge OLED display, aluminum frame" |
|
|
| **Watch** | "luxury smartwatch with titanium case and sapphire crystal" |
|
|
| **Laptop** | "thin laptop with aluminum unibody, open at 45 degrees" |
|
|
| **Camera** | "mirrorless camera with prime lens attached, side profile" |
|
|
|
|
---
|
|
|
|
## End Frame Prompts
|
|
|
|
### Exploded Technical View
|
|
|
|
```
|
|
Exploded technical diagram view of [PRODUCT NAME], every component precisely
|
|
separated and floating in perfect alignment, suspended in mid-air against deep
|
|
black studio background (#050505). Visible internal structure including
|
|
[INTERNAL COMPONENTS], all parts evenly spaced showing assembly order.
|
|
Hyper-realistic product visualization, ultra-sharp focus, studio rim lighting
|
|
identical to hero shot, soft highlights tracing each component, controlled
|
|
reflections on matte and metal surfaces. Cinematic lighting, high contrast,
|
|
luxury engineering aesthetic, no labels, no annotations, no text.
|
|
Photorealistic, ultra-high resolution, Apple-style industrial design render,
|
|
dramatic and clean.
|
|
```
|
|
|
|
**Variables**:
|
|
- [PRODUCT NAME]: Your product
|
|
- [INTERNAL COMPONENTS]: Specific parts to show
|
|
|
|
---
|
|
|
|
### Internal Components by Product
|
|
|
|
| Product | Internal Components Examples |
|
|
|---------|------------------------------|
|
|
| **Headphones** | "copper wiring, titanium drivers, magnets, circuit boards, padding layers, metal frame" |
|
|
| **Smartphone** | "battery, logic board, cameras, OLED panel, antenna bands, frame" |
|
|
| **Watch** | "watch movement, gears, battery, sensors, display, crown mechanism" |
|
|
| **Laptop** | "keyboard assembly, trackpad, battery cells, logic board, cooling fans, display panel" |
|
|
| **Camera** | "sensor, shutter mechanism, lens elements, mirror assembly, circuit boards" |
|
|
|
|
---
|
|
|
|
## Video Interpolation Prompts
|
|
|
|
### For Runway/Pika
|
|
|
|
```
|
|
Smoothly transition from fully assembled [PRODUCT] to exploded view.
|
|
Components separate slowly and precisely, maintaining perfect alignment.
|
|
Camera stays locked, product rotates slightly clockwise. Cinematic motion,
|
|
professional product animation, 4-5 seconds duration, 30fps.
|
|
```
|
|
|
|
**Settings**:
|
|
- Duration: 4-5 seconds
|
|
- FPS: 30 (yields 120-150 frames)
|
|
- Camera: Static or slow orbit
|
|
- Motion: Smooth, controlled separation
|
|
|
|
---
|
|
|
|
## Frame Extraction
|
|
|
|
### Using ffmpeg
|
|
|
|
```bash
|
|
# Extract as WebP (best for web)
|
|
ffmpeg -i animation.mp4 -vf fps=30 frame_%04d.webp
|
|
|
|
# Extract as PNG (higher quality, larger)
|
|
ffmpeg -i animation.mp4 -vf fps=30 frame_%04d.png
|
|
|
|
# Extract with quality control
|
|
ffmpeg -i animation.mp4 -vf fps=30 -quality 90 frame_%04d.webp
|
|
```
|
|
|
|
### Using ezgif.com
|
|
|
|
1. Upload MP4 video
|
|
2. Choose "Video to GIF" → "Split to frames"
|
|
3. Select WebP format
|
|
4. Download all frames as ZIP
|
|
5. Rename: `frame_0001.webp`, `frame_0002.webp`, etc.
|
|
|
|
---
|
|
|
|
## Background Color Matching
|
|
|
|
**CRITICAL**: Page background MUST match image background exactly
|
|
|
|
### Recommended Dark Backgrounds
|
|
|
|
| Color Code | Usage |
|
|
|------------|-------|
|
|
| `#050505` | Pure black with slight lift (recommended) |
|
|
| `#0a0a0a` | Slightly lighter, less harsh |
|
|
| `#000000` | True black (only if images are true black) |
|
|
| `#1a1a1a` | Dark gray (for lighter renders) |
|
|
|
|
**Pro tip**: Use eyedropper tool on first frame background, use exact hex in CSS
|
|
|
|
---
|
|
|
|
## Alternative Animation Styles
|
|
|
|
### Rotation (360° spin)
|
|
|
|
**Start**: Front view
|
|
**End**: Front view (after 360° rotation)
|
|
**Prompt**: "Rotate product 360 degrees on turntable, maintain lighting"
|
|
|
|
### Zoom In (Feature reveal)
|
|
|
|
**Start**: Full product view
|
|
**End**: Close-up of key feature
|
|
**Prompt**: "Smooth camera push-in focusing on [FEATURE], maintain focus"
|
|
|
|
### Morph (Color/style change)
|
|
|
|
**Start**: Product in color A
|
|
**End**: Product in color B
|
|
**Prompt**: "Seamlessly morph product color from [A] to [B], maintain form"
|
|
|
|
---
|
|
|
|
## Quality Settings
|
|
|
|
### For High-End Results
|
|
|
|
- **Resolution**: 1920x1080 minimum (4K for high-DPI)
|
|
- **Format**: WebP (compression) or PNG (quality)
|
|
- **Frame count**: 90-150 frames (3-5 seconds at 30fps)
|
|
- **Total size**: Target <50MB for all frames combined
|
|
|
|
### Optimization Tips
|
|
|
|
1. Use WebP format (70% smaller than PNG)
|
|
2. Compress with quality 85-90
|
|
3. Resize images to max 2000px width
|
|
4. Use consistent aspect ratio (16:9 or 1:1)
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Background color matches exactly (no visible edges)
|
|
- [ ] All frames same dimensions
|
|
- [ ] Smooth motion (no jumps between frames)
|
|
- [ ] Consistent lighting across sequence
|
|
- [ ] File names sequential (`frame_0001` to `frame_0120`)
|
|
- [ ] Total file size reasonable (<50MB)
|
|
|
|
---
|
|
|
|
## Related
|
|
|
|
- concepts/scroll-linked-animations.md - Understanding the technique
|
|
- examples/scrollytelling-headphone.md - Full implementation
|
|
- guides/scrollytelling-setup.md - Setup instructions
|
|
|
|
---
|
|
|
|
## Tool References
|
|
|
|
- [Runway ML](https://runwayml.com) - AI video generation
|
|
- [Pika Labs](https://pika.art) - AI video interpolation
|
|
- [ezgif](https://ezgif.com/split-video) - Frame extraction
|
|
- [FFmpeg](https://ffmpeg.org) - Video processing
|