Media & effects
Speed Warp
High-velocity 3D perspective starfield tunnel with canvas streaks.
detent-speed-warp
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-canvas
- Group
- Media & effects
3.3 KB gzip for the class module
Variants
The starfield is one transparent canvas in front of the slotted content. It pauses while offscreen, while the tab is
hidden and when paused is present, and it paints a single static frame with
prefers-reduced-motion: reduce. The slotted headlines are the readable layer and stay in the light DOM.
Every setting is a scalar attribute with a matching property. className is gone: the documented parts
(canvas, content) and the
--detent-speed-warp-height/--detent-speed-warp-radius/--detent-speed-warp-surface
custom properties are the supported knobs.
Recorded states
pausedrecorded state; no setterreduced motionrecorded state; no setter
Usage
Import
import '/components/speed-warp/define.js';
// or register it yourself
import { DetentSpeedWarp } from '/components/speed-warp/speed-warp.js';Attributes
pausedspeedstar-count
Properties
No properties are recorded for this component.
Slots
default
Events
No events are recorded for this component.
Example
Runnable example: site/examples/speed-warp.ts. The snippet below is generated from the catalogued attributes.
<detent-speed-warp
paused
speed="25"
star-count="600"
></detent-speed-warp>Source
The pinned upstream source for this row:
src/components/ui/SpeedWarp.tsxsha256 40c31ad2b401…
Native files
The native module and its artifacts:
src/components/speed-warp/speed-warp.tssrc/components/speed-warp/styles.csssrc/components/speed-warp/define.tsdocs/components/speed-warp.mdsite/examples/speed-warp.tstests/browser/speed-warp.spec.tsevidence/components/speed-warp.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
paused | — | — | — | Recorded in the catalog as an attribute. |
speed | speed | number | 25 | Kebab-case attribute; camelCase property. |
star-count | starCount | number | 600 | Kebab-case attribute; camelCase property. |
Properties
No property-only values are recorded for this component.
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
default | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Reduced motion stops the loop and paints one static frame; the pinned source animates (PC-10.5 addition, proved by the absence of a prefers-reduced-motion branch).
- A hidden document stops the loop through visibilitychange; the source has no visibilitychange handler.
- The star field is kept across speed changes and reconnection instead of being re-created on every effect run.
- The canvas backing store honours devicePixelRatio capped at 2 while drawing in CSS px.
- star-count clamps to 0..2000, rounded, with one development warning.
- The host is position: relative with a documented min height (320px default, --detent-speed-warp-height) instead of absolute inset-0.
What it does
A transparent 3D perspective starfield tunnel — a warp/hyperspace background you layer behind a hero, a card or a full-screen splash.
Upstream behaviour
- Real-time 3D perspective projection with focal length scaling
- Dynamic depth-alpha fading and velocity-driven streak lines
- Completely transparent canvas background for seamless layering over any dark UI or hero section
- Automatic canvas resizing via ResizeObserver to match parent container dimensions
Differences from upstream
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Reduced motion stops the loop and paints one static frame; the pinned source animates (PC-10.5 addition, proved by the absence of a prefers-reduced-motion branch).
- A hidden document stops the loop through visibilitychange; the source has no visibilitychange handler.
- The star field is kept across speed changes and reconnection instead of being re-created on every effect run.
- The canvas backing store honours devicePixelRatio capped at 2 while drawing in CSS px.
- star-count clamps to 0..2000, rounded, with one development warning.
- The host is position: relative with a documented min height (320px default, --detent-speed-warp-height) instead of absolute inset-0.