Floating island growth chart
A floating island growth chart in vertical 9:16: coral towers rise as bars and a toy plane draws the trend line. Copy the prompt into Claude and edit it.
A grassy island floats over a sea of cloud while clouds part and the camera dives in. Coral towers push out of the lawn one per year, each with a tag that pops above its roof. A toy plane skims the rooftops, then a cloud wipe leads to a low shot.
Change the company name, what the bars count, the years, the values, the prefix and suffix, and the accent colour, using two to six years. Its 1080x1920 frame suits Reels, TikTok and Shorts, so it works for investor updates, product milestones and yearly recaps.
Use it for
- Vertical investor update clips
- Yearly user growth recaps
- Product milestone posts for Reels
Specs
- Length: 13 seconds
- Format: vertical 9:16 (1080x1920), 30 fps
- Built with: Three.js in HyperFrames
- Category: Charts
What happens, beat by beat
- 0 to 1.2 s. The whole island in blue sky, waterfall pouring off. Three sunlit cloud masses in front of the lens part outward by 0.7 s as the camera dives and orbits 44 degrees to…
- 0.5 to 5.7 s. Tower k starts at 0.5 + 1.1k s and takes 0.5 to 1.05 s (taller takes longer): cubic ease to a 6% overshoot, then a damped settle. As it breaks ground the…
- Year tags. A cream pill with a pointer, pinned in HTML above each roof by projecting a 3D point each frame: spaced year, big value. It pops 0.2 s in with a back-ease scale, counts with…
- 5.7 to 9.2 s. Pull back to the whole chart. A toy plane in the accent colour enters left at 6.3 s, skims each antenna, banks and climbs off top-right. As it crosses each roof the…
- 9.5 to 10.0 s. A deep cumulus bank wipes left to right in camera space, slowing so the frame is fully covered for 0.2 s. Hidden cut to the hero at 9.75 s.
- 9.75 to 13 s. Low three-quarter hero, all bars clear, grass edge about 72% down. A crisp white line draws through the five antenna tips (10.0 to 10.6 s) with cream-and-accent dots popping as it arrives.…
Light, sky and finish
- Afternoon sun 41 degrees up from camera-left, warm white, 4096 soft PCF shadows; low environment intensity so shaded faces sit 1.5 to 2 stops under lit ones.
- Sky dome (deep blue zenith, pale horizon, sun glow) baked to a PMREM environment with a bright lower half, so the underside gets cool bounce. Far below, a cloud-sea plane…
- Clouds: noise-displaced spheres with flattened bellies, blue undersides, warm tops, silver rims.
- Post: 4x MSAA half-float, a gather depth of field focused on the camera target (blur sized per camera key), soft bloom, ACES, a gentle S-curve, vignette and grain.
- Camera: keyed target, log-space distance, yaw, pitch, fov and lens shift, Hermite-interpolated; two takes joined at the hidden cut.
How the prompt opens
Make a 13-second, 9:16 (1080x1920, 30 fps) tilt-shift diorama in Three.js. A grassy floating island hangs over a sea of cloud. Five coral towers on its main street push up out of the lawn as yearly figures for [your brand, e.g. an invented app called Halcyra], each year's tag pops above its roof and flies off, a little toy plane skims the rooftops trailing a contrail, then a cloud wipes to a low hero shot where a crisp white trend line draws through the antenna tips and the total lands. Swap in [your years], [your values], [metric, e.g. users], [prefix/suffix, e.g. $ or M] and [accent colour, default #ff6a4d].
The full prompt runs 1,092 words. Copy it free (2 a day) from this page.
Copy the prompt into Claude, or pull the scene into Claude Code and render the MP4 on your machine: how it works.