THE HANDOFF
Make it your own.
Stillroom is a fictional plant rental brand concept. Names, plans and service copy are illustrative. No real pricing, inventory, customer claims or service area is implied.
What’s included
A five-chapter desktop scroll story, a shorter still-image experience for mobile and reduced motion, service sections, three space detail pages with plant and styling guidance, a filterable example plant library, a demo brief builder and a style tile.
The desktop film follows a physical plant installation in one room. The care chapter uses a still-image cutaway, then returns to the completed room.
Download the complete source ↗
Editing map
| Change | Where |
|---|---|
| Brand, service copy, plans and plant descriptions | index.html |
| Space-specific plant guides and styling advice | home.html, office.html, outdoor.html |
| Scroll copy, chapter positions and media references | content.js |
| Colours, fonts, layout and responsive styles | styles.css, shared by the style tile |
| Scroll, filters and demo form behaviour | app.js |
| Photography and film | assets/ |
The source files use plain HTML, CSS and JavaScript. No build step is required. Serve the folder with a static web server for local use.
The visual assets
All visuals were generated through Magnific. The plant portraits share one three-panel image, displayed as individual crops in the library. The office installation film was supplied as a user-generated Magnific asset and is used in the “How it works” section. The service cards now show distinct settings: a home, a shared office and a café terrace. These are illustrative settings, not documented client projects.
Before using this for a real business
- Replace the fictional brand and agree actual rental terms, pricing, coverage and replacement policy.
- Confirm inventory and species suitability for each customer’s space.
- Connect the form to a real submission destination, then replace its demo labels. It currently sends and stores nothing.
Motion & loading
Desktop scroll has deliberate opening and completed-room holds. Native scrolling is preserved. Chapter buttons allow direct navigation, and “View without motion” switches to the still-image story.
Mobile screens up to 700px, reduced-motion preferences, data-saving connections and reported low-memory devices use the shorter story. A video error falls back to this view. Slow loading keeps the still-image introduction until the film is ready; it no longer removes the film after a fixed loading timeout. A visible “Watch the 10-second film” link is available in every mode and opens a native player with controls.
Validation notes
Local routes, assets, anchor links, image alternative text and JavaScript syntax were checked. Film keyframes were inspected for room continuity. The 10-second H.264 film is prepared with frequent keyframes for seeking.
Live browser validation of desktop/mobile layouts, keyboard interactions and forward/reverse scrolling remains unverified: this static site has no compatible supervised browser preview in the current environment.
Plant reference sources
Light preferences checked against the Royal Horticultural Society: rubber plant, Monstera and ZZ plant. The catalogue images are illustrative.
Generation credits
| Asset | Magnific credits |
|---|---|
| Six still images · Seedream 5 Pro | 600 |
| 10-second installation film · Kling 2.5 | 520 |
| Total charged for these requests | 1120 |
These figures come from the generation responses. They exclude any activity outside this build. Model token usage is not exposed here.