Piotr Jarkowski's Work | ContraWork by Piotr JarkowskiPiotr Jarkowski
Designer & Webflow Expert
- $5k+
- Earned
- 1x
- Hired
- 5.00
- Rating
- 23
- Followers
SkyBadge is a digital pilot logbook I founded and build. For its new landing page I wanted a hero that showed the product's best feature, 3D flight replay without making a visitor wait for it.
A pinned, scroll-driven 3D scene in Three.js. At rest, a Boeing 737 sits under the heading in a night sky of procedurally generated fog; the aircraft banks with the cursor as if rolling into a turn. As the visitor scrolls, the camera orbits from a front-left view round the tail to directly above, contrails stream from the engines, and a second headline reveals beneath.
How it's made
React + Three.js + Framer Motion (scroll progress drives the camera in spherical coordinates)
The aircraft is the same model used in the app's replay feature, retinted to brand colours at load and compressed with meshopt from 8.5 MB to 1.3 MB
Fog is ~100 billboard sprites with noise-generated textures, drifting along the aircraft's heading
Contrails are chains of soft particles that billow and thin with age
The scene is lazy-loaded behind the heading, stops rendering when off-screen, caps pixel ratio at 1.5×, and is skipped entirely on phones — the page still scores well on Core Web Vitals
Result
A hero that feels like a native app, costs the page nothing on first paint, and ties directly to the feature pilots pay for.
I build 3D and motion-led websites like this for clients through AMS Digital — Three.js, Spline, Rive, scroll-driven storytelling. If you want something that moves, get in touch.
Live: skybadge.app (http://skybadge.app) Webflow Landing Page Design and Development GolfFit Landing Page Design and Webflow Development For Envato Challenge, I created a fictional launch commercial for a premium electric vehicle brand called Volta EV7.
Rather than focusing only on AI-generated output, I wanted to show how creative judgment shapes the final result. Every stage of the project involved iteration, selection, and refinement. From naming the brand and designing the logo to generating visuals, creating cinematic video sequences, crafting the voiceover, generating music and sound effects, and finally editing everything into a cohesive story.
Envato served as the primary creative toolkit throughout the project. I used its AI-powered tools to generate visual concepts, voiceover, music, and sound effects, while continuously refining the outputs until they matched the premium, cinematic direction I envisioned.
To document that process, I also created a walkthrough showing how the project evolved from an initial idea into the finished film.
https://x.com/piotr_ams/status/2081527934884405518
@Envato