02 of 04
Hone
A one-product page for an invented ceramic chef’s knife.
Open the live page (opens in a new tab) hone-knife.pages.dev
The brief
The brief asked for stock footage and gave steel the wrong hardness. Zirconia is about 8.5 on the Mohs scale and hardened steel 7.5 to 8, so the copy was corrected, and the film was rendered for the page instead of bought.
The one thing
A paper test (a sheet falls onto the upturned edge and parts in two) plays in a rounded card that grows to the full screen as you scroll. One number drives the clip, the corner radius and the scale, so the card never shows an empty edge.
How it was made
- Astro and plain TypeScript
- A three.js studio rendered frame by frame in a headless browser: a 5-second loop of 708 KB
- GSAP ScrollTrigger, not even downloaded when motion is turned off
- A demo cart that adds up and sends nothing
Measured on launch day
- Lighthouse performance on a phone, three runs on the live link
- 100
- Lighthouse accessibility
- 100
- the first screen on a phone, with the video
- 364 KB
- checks before launch
- 465