Capafy logo Capafy
Get started
Image to Motion Site

Image to Motion Site

by: slee
Image to Motion Site — Drop any image, get a premium animated website. Analyzes your photo's palette, mood and subject, picks the best template from motionsites.ai, and builds a single-file HTML site with GSAP ScrollTrigger + Lenis smooth scroll. Your image in 4+ treatments across 6+ sections: full-bleed hero, parallax, clip-path reveals, duotone overlays, preloader, pinned scrub, staggered text, marquee and film grain. Awwwards-quality, zero build tools.
#Design#Productivity
Rating
More ratings needed
Sold
0
How to use
Download

Ecco il README marketplace per l'Agent:

🎬 Image to Motion Site

Drop an image. Get an Awwwards-quality animated website.

One photo in → premium scroll-animated single-page site out. No frameworks, no build tools, no design skills needed.

What It Does

Give the agent any image — product photo, artwork, portrait, logo, screenshot — and it builds a complete animated website where your image is the visual protagonist.

The Process

  1. Image Analysis — extracts palette (4-6 hex colors), mood, subject, typography cue
  2. Prompt Selection — browses live, picks the best-matching animation template, presents 2-3 candidates
  3. Site Generation — builds a single index.html with inline CSS + JS
  4. Verification — opens in browser, checks every animation fires correctly

What You Get

A single self-contained HTML file with:

  • 6+ animated sections in AIDA storytelling order
  • 4+ image treatments — your one photo used as: full-bleed hero, duotone background, clip-path reveal, parallax band, circular medallion, oversized crop, fixed-background window
  • Preloader — counter 0→100 + curtain lift
  • Scroll animations powered by GSAP 3 + ScrollTrigger + Lenis smooth scroll
  • Film grain overlay for premium texture
  • Responsive — works on mobile (375px) through desktop
  • Accessibility — respects prefers-reduced-motion

Animation Toolkit

Effect Description
Pinned Scrub Section pins while content crossfades on scroll
Staggered Text Words rise into view one-by-one
Clip-Path Reveal Image wipes in from edge or circle
Parallax Layers Background moves at different scroll speed
Marquee Strip Infinite horizontal text loop
Hero Entrance Orchestrated timeline on page load
Stat Counters Numbers animate up on scroll

Example Output

Input: Samurai warrior in spider lily field (single JPG)

Output: "KURENAI" — a 7-section cinematic site featuring:

  • 19vw mega-letter title with staggered entrance
  • Red kanji marquee strip (彼岸花)
  • Editorial section with pill tags + clip-path image band
  • Chronicle gallery with 5 clickable chapters, auto-cycling medallion
  • Pinned duotone scene with 3 crossfading texts over 250% scroll
  • Word-by-word quote reveal
  • Parallax footer with sliding CTA

12 ScrollTrigger instances · Lenis smooth scroll · Film grain overlay

image.webp

Tech Stack

GSAP 3 + ScrollTrigger    → scroll-driven animations
Lenis                      → smooth scroll + ScrollTrigger sync
Vanilla HTML/CSS/JS        → zero dependencies, zero build step
SVG feTurbulence           → film grain texture
CSS clamp()                → fluid responsive typography

CDN-only: no npm, no bundler, no framework. Open the file in any browser.

Use Cases

  • Portfolios — turn your best work into an immersive showcase
  • Product launches — hero your product photo across a full landing page
  • Art & photography — present a single piece as a cinematic experience
  • Event pages — drop a venue photo, get an animated invite site
  • Personal branding — one headshot → full animated personal site

How to Use

1. Provide any image (JPG, PNG, WebP)
2. Agent analyzes + picks best motionsites.ai template
3. Choose from 2-3 template candidates (or let it auto-pick)
4. Get your index.html — open in browser, done

View more