Free
$0forever
Every scene and every setting, on any site, commercial or not.
- All four seasons, every hour
- Your brand colours
- The element and the iframe
- A small credit link, kept visible
This browser cannot draw WebGL2, so the scene stays as a gradient here. Every current version of Chrome, Edge, Firefox and Safari can.
CSS Crème Scenes
A living meadow for your website.
Four seasons and a field of dandelion clocks you can blow, any hour of the day, wind you can turn up, and flowers in your brand's colours. Every blade is grown by code on the visitor's device, so there are no 3D models, images or recordings to download: the whole scene is one small script.
The studio
Make it yours, then take it with you.
Everything you change here is in the address bar, so a copied link opens this exact scene, colours and camera included. Drag the scene to look around, scroll or pinch to zoom in up to six times. In the dandelion clocks, hold the pointer over a seed head and it blows away seed by seed; tap one to blow it all at once.
Measuring this device…
Your brand
Flowers in the colours your site already declares.
Paste your address. The CSS Crème decoder reads the colours your stylesheets declare and hands three of them to the flowers, with each one's source named: a role like primary, or a colour your CSS uses. Nothing is sampled from a screenshot and nothing is made up; a site with fewer than three strong colours gets a shade of its first, and the list says so.
Embed
Two lines on any page. Free.
The code below always matches the scene in the studio above. Paste it into any HTML, a CMS block or a Webflow, Framer or WordPress embed. It loads only when it scrolls near the screen.
As an element
<script type="module" src="https://csscreme.com/scenes/embed.js"></script>
<creme-scene season="summer" time="16.2"></creme-scene>As an iframe
<iframe src="https://csscreme.com/scenes/frame?s=summer&t=16.2" title="Summer garden" loading="lazy" style="border:0;width:100%;aspect-ratio:16/9"></iframe>Behind your hero copy
mode="background" fills the nearest positioned parent and sits behind its content. It ignores the pointer unless you add interactive="true".
<section style="position:relative">
<creme-scene mode="background" season="spring" time="9"></creme-scene>
<div style="position:relative">Your headline</div>
</section>Colours from your CSS
The element reads custom properties, so a design system can theme it in one place: --scene-a, -b, -c for the flowers, and --scene-grass, --scene-sky, --scene-light.
creme-scene {
--scene-a: #4f46e5;
--scene-b: #f05a28;
--scene-c: #ffffff;
}Every attribute
| Attribute | Values | Default |
|---|---|---|
season | spring, summer, autumn, winter, dandelion | summer |
time | Hour of the day, 0 to 24, with sunrise, golden hour, dusk and night between | 16.2 |
wind | 0 (still) to 1 (gusty) | 0.35 |
seed | Any whole number; the same seed grows the same field | 7 |
density | 0.2 to 2, how many plants | 1 |
palette | a #hex, b #hex, c #hex, grass #hex, sky #hex, light #hex | The season's own |
zoom, yaw, pitch | The camera: zoom 1 to 6, yaw in radians, pitch -0.05 to 0.75 | 1, 0.6, 0.16 |
mode | background to sit behind content | None |
interactive | false to ignore the pointer | true |
credit | off, for licensed sites | Shown |
What it costs a visitor
25.3 KB for the whole meadow.
Measured from the files this deploy ships, compressed with gzip. A scene is code that grows its plants from a seed, which is why there is nothing else to fetch.
The engine, engine.js | 22.7 KB |
|---|---|
The element, embed.js | 2.6 KB |
The soundscape, sound.js, on this site only | 2.0 KB |
| 3D models | 0 |
| Textures and images | 0 |
| Audio recordings | 0 |
- Off-screen, it stops. A scene scrolled out of view or in a hidden tab draws nothing.
- Reduced motion is honoured. A visitor who asks for less motion gets a still frame until they press play.
- It thins itself. Frame rate is measured on the device every second; a scene that drops below 34 frames a second draws fewer plants, then fewer pixels.
- Phones get a smaller field with about a third of the plants, chosen from the pointer type, not a guess at the screen.
- Without WebGL2 the gradient stays, sized like the scene, so the layout never jumps.
Pricing
Free to embed. Pay once to make it entirely yours.
Site licence
$149one-time
One website and its subdomains, without the credit.
- No credit badge
- Self-host the files, or use ours
- 12 months of engine updates
- Commercial use, client work included
Studio licence
$490one-time
Up to 10 client websites, for designers and agencies.
- Everything in the site licence
- Up to 10 named websites
- Priority email answers
- Move a licence to a new client site
Custom scene
From $1,500
A scene grown around your brand or campaign.
- Your colours, light and flowers
- New plants, or your product in the field
- Your call to action in the scene
- Two rounds of changes
Prices in US dollars, before any tax your country adds. Refunds within 14 days of purchase, no questions asked. The licence says exactly what each plan allows.
Questions
Before you plant one.
Can I use the free embed on a commercial site?
Yes. The free plan covers any site, commercial or not, as long as the small "Scene · CSS Crème" credit stays visible. A licence removes it.
Does the credit link ask for a backlink?
No. It is marked nofollow, so it passes no ranking signal and asks for none. It is there so people who like the scene can find where it came from.
Will it slow my page down?
The element and the engine together are 25.3 KB compressed, and nothing loads until the scene is near the screen. It never blocks your page from rendering, and it stops drawing when it is out of view.
Does it work on phones?
Phones get a smaller field with fewer plants, and the scene measures its own frame rate as it runs and thins itself if the device struggles. A browser without WebGL2 keeps a gradient in the same space.
Can I self-host it?
With a licence, yes: engine.js and embed.js are plain files with no dependencies. Copy them to your own server and point the script tag at them.
Who made the plants and the sounds?
CSS Crème wrote the code that grows them. There are no third-party models, textures or recordings in a scene, which is why the licence can be simple.