Hyperspace

React
import Hyperspace from "@/components/fx/hyperspace"

const [paused, setPaused] = useState(false)

<Hyperspace paused={paused}>
    <button aria-pressed={paused} onClick={() => setPaused(p => !p)}>
        {paused ? "Play" : "Pause"} background
    </button>
</Hyperspace>

• The effect layer is aria-hidden and ignores pointer events; only children are exposed.
• This is one of the most intense effects: use it briefly or behind a visible pause control, never behind long reading content.
• Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
• prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows a still field of stars.