Hyperscript Landing Page Example
Exact example from hyperscript.org landing page
This tests the bundle's ability to handle the color cycling demo exactly as shown on the official site.
Press and hold the box below. Watch the colors cycle while you hold! Release to stop.
Press & Hold Me!
Ready - Press and hold the box
The Exact Code
_="on pointerdown
repeat until event pointerup from the document
set rand to Math.random() * 360
transition
*background-color
to `hsl($rand 100% 90%)`
over 250ms
end
transition *background-color to initial"
Features Tested
on pointerdown - Pointer event handlingrepeat until event pointerup from the document - Event-driven loop with global event sourceset rand to Math.random() * 360 - JavaScript global access and arithmetic*background-color - CSS property access (possessive style syntax)`hsl($rand 100% 90%)` - Template string with variable interpolationover 250ms - Transition timingto initial - CSS initial value keyword