Day Night Slider: a One-Screen Website That Glides from Day to Night
A one-screen website where scrolling turns one place from day to night: SandBase generates a day picture, its night version and a locked-off time-lapse between them. The clip fills the window and is painted on a canvas, so the wheel, a swipe or the arrow keys glide it through pages that change in place: chapters by the hour, a regular's quote, a menu with prices and a visit page, with labels on the shop signs and a running clock.
Bring a building or street corner to show (or your own picture), your brand, copy, links and language. The Skill returns a static one-screen site (index.html) with its runtime, fonts and the analysed clip, and colours taken from the picture.
How it works
With your go-ahead (about $0.85), SandBase generates a daytime picture, edits it into the same scene at night, and makes a locked-off time-lapse from one to the other.
The analysis measures how much the picture changes in every frame and maps the slider to that accumulated change, so the sunset does not rush past.
The page reads the clip once into frames and paints the one for the current position on a canvas, blending the two nearest, so it glides at the screen's frame rate. The page itself does not scroll: each scroll moves one page on and settles there.
Frequently asked questions
Does the page call a model?
No. The finished page is static: HTML, one script, fonts and one clip. Models are only used when the Skill generates a new clip.
What does a new clip cost?
About $0.85 per attempt through SandBase. The Skill refuses clips with cuts or too little change, so budget for a retry.
Can I use my own picture or clip?
Yes. Pass your own picture to skip the image step, or analyse your own locked-off clip with analyze.mjs.
Why do the links do nothing here?
The example runs in a sandboxed frame with its links disabled. In your page they go wherever you set them in site.json.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.