Facet

Facet is a product page website template from Solus Five. ₱199, paid once. Cinematic scroll-driven product landing. The motion is native CSS, so it costs no animation library and no build step.

Facet is the showpiece product page that this category usually builds with GSAP and Three.js, around 670KB of JavaScript before any of your own. This one uses animation-timeline, which ties the sequence to the scrollbar and runs it on the compositor with no script involved at all. Browsers without that support get the identical choreography driven by a fallback that writes one custom property, so there is one set of animations and two ways to supply its clock. The stage height is the timeline, so retiming the whole sequence is one number. Reduced motion is a real path rather than a switch: the stage un-pins, the object comes to rest, and every beat becomes an ordinary readable section.

The Facet template: a cinematic product landing where a machined amber object turns as you scroll, driven by CSS rather than an animation library.

What Facet includes

  • Scroll-driven motion with no animation library
  • Works without animation-timeline support
  • Retime the whole sequence with one number
  • A real reduced-motion layout, not a switch

Pages

  • index.html
  • specs.html
  • story.html
  • buy.html

Files you get

  • index.html
  • specs.html
  • story.html
  • buy.html
  • styles.css
  • app.js
  • test.js
  • README.md

Specifications

Pages4
Build stepNone
FrameworkNone
JS~4.4KB
LicenseSingle payment, unlimited projects

Price

Facet costs ₱199, paid once. One payment, use on unlimited projects, no subscription.

Buy Facet for ₱199