Impress your clients and convert new business.
The hero you just scrolled through? That's the product. A portrait that dissolves into smoke as visitors scroll — and reassembles as they scroll back. Unmistakably you. Impossible to ignore.
It stops the scroll.
A still photo gets skipped. Motion that responds to them doesn't.
It reads expensive.
Signals high craft on sight — before you've said a word.
It's unmistakably you.
Not a template anyone else can buy. Your signature, built in.
The process
Four steps.
About a week.
No plugin. No template. A real asset and real code, built for your site.
01
Your photo becomes a dissolve
Send one portrait. It runs through AI video generation until the dissolve is clean — sharp for a beat, then smoke, then gone. One direction only. Most clips fail that on the first try. I regenerate until one passes.
02
The video becomes frames
The clip is decomposed into a numbered sequence of web-sized images. This is the step that makes the effect work everywhere instead of just on my machine.
03
The frames go on a CDN
Assets are hosted on Cloudflare R2 and served from an edge URL. Your site stays fast. Your hero loads from infrastructure built to serve it.
04
Scroll gets wired to the playhead
The hero pins. Scroll position maps to frame index. Scroll down it dissolves, scroll up it reassembles. The visitor is holding the playhead and they can feel it.
The shortcut I don't take
Most scroll effects don't animate.
They jump.
Nobody builds it badly on purpose. It's the default — quick, cheap, and it passes every test you run on your own screen.
60 → 1
An animation is just still pictures shown fast. This one has sixty. A cheap build can't load them fast enough while you scroll, so your screen skips them and snaps to the ending.
Measured across browsers, on an effect built the shortcut way.
One video file, shoved forward frame by frame as you scroll. Quick to build, and it looks right on the machine it was made on.
Playing a video and jumping around inside one are different jobs. Some browsers fill in the gaps. Most don't — they skip almost everything between.
They scroll, nothing moves, then it snaps. It doesn't read as a premium effect. It reads as a website that's broken.
Of 60 steps down the page, how many the visitor actually sees
Tested in Chrome across 60 steps of a 6-second clip, against a control confirming every step registered.
Compatibility
Webflow. Framer.
Next.js.
Each one has its own trap. Each one is documented.
Webflow
Where the embed goes versus where the scripts go. Letting the smoke bleed past container edges instead of getting clipped. Beating Webflow's CSS specificity.
Framer
Embeds reject document-level tags, and media queries inside them don't survive Framer's responsive system — so layout is driven by JavaScript. Tested published, not just in preview.
Next.js
Client component. GSAP registered inside an effect so SSR doesn't break. ScrollTrigger cleanup on unmount so route changes don't leave duplicate pins.
Two ways in
Get the hero on your site
The Skill
$69Everything you need to build it yourself. The complete cross-browser engine, the AI prompt library that generates the dissolve, frame extraction, hosting setup, and detailed step-by-step instructions for Webflow, Framer, and Next.
If you're technical or work with AI tools, you'll have it live in an afternoon.
Get the SkillInstant download · via Gumroad
Done-For-You
$697Send me a photo. I enhance it, generate your custom smoke-dissolve, and integrate the whole thing onto your site. You watch it go live.
Zero technical work on your end.
Start my hero$100 deposit to book · secure Stripe checkout
Reserve your build.
6 spots this month.
The done-for-you hero is a small, hands-on batch — I take a limited number of clients each month so every build gets full attention.
Step 1 — Reserve
$100 deposit
Step 2 — Confirm
$597 balance
Spots left
6 of 6
$100 reserves your slot and is credited toward your $697 total. The $597 balance is due before your build begins. Deposit is non-refundable. Applicable tax calculated at checkout based on your location.