Media & effects
Dot Field
Lightweight static Canvas particle matrix background
detent-dot-field
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-canvas
- Group
- Media & effects
2.8 KB gzip for the class module
Variants
A decorative layer with no text, no slot and no event. The field above uses the documented defaults (dot-radius
1.5, dot-spacing 14 and the blue→purple gradient); this one is the same element with four scalar
attributes changed. Both paint once, repaint on resize, and schedule zero animation frames.
Recorded states
No states are recorded for this component.
Usage
Import
import '/components/dot-field/define.js';
// or register it yourself
import { DetentDotField } from '/components/dot-field/dot-field.js';Attributes
dot-radiusdot-spacinggradient-fromgradient-to
Properties
No properties are recorded for this component.
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/dot-field.ts. The snippet below is generated from the catalogued attributes.
<detent-dot-field
dot-radius="1.5"
dot-spacing="14"
gradient-from="rgba(56, 189, 248, 0.35)"
gradient-to="rgba(168, 85, 247, 0.25)"
></detent-dot-field>Source
The pinned upstream source for this row:
src/components/ui/DotField.tsxsha256 8858b95d3499…
Native files
The native module and its artifacts:
src/components/dot-field/dot-field.tssrc/components/dot-field/styles.csssrc/components/dot-field/define.tsdocs/components/dot-field.mdsite/examples/dot-field.tstests/browser/dot-field.spec.tsevidence/components/dot-field.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 |
|---|---|---|---|---|
dot-radius | dotRadius | number | 1.5 | Kebab-case attribute; camelCase property. |
dot-spacing | dotSpacing | number | 14 | Kebab-case attribute; camelCase property. |
gradient-from | gradientFrom | string | 'rgba(56, 189, 248, 0.35)' | Kebab-case attribute; camelCase property. |
gradient-to | gradientTo | string | 'rgba(168, 85, 247, 0.25)' | 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
No slots are recorded for this component.
CSS customisation
- `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.
- The documented colour defaults (rgba(56,189,248,0.35) and rgba(168,85,247,0.25)) are implemented while the pinned source destructures rgba(255,255,255,0.12) and rgba(255,255,255,0.04); the row is the API authority.
- A negative dot-radius clamps to 0 instead of throwing IndexSizeError from ctx.arc (PC-3.4).
- A non-positive dotRadius or dotSpacing clears the canvas and paints nothing.
- The host publishes --detent-dot-field-height (100%, 8rem minimum) where upstream relied on h-full inside a sized wrapper.
- Attribute-derived values are reflected while connected.
What it does
A decorative dot-matrix background painted into a canvas from a gradient, with a fixed grid that repaints when its size changes.
Upstream behaviour
- Hardware-accelerated HTML5 Canvas rendering
- Zero CPU overhead — renders once and updates only on resize
- Clean linear gradient coloring with custom stops
- Responsive ResizeObserver layout support
Differences from upstream
- `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.
- The documented colour defaults (rgba(56,189,248,0.35) and rgba(168,85,247,0.25)) are implemented while the pinned source destructures rgba(255,255,255,0.12) and rgba(255,255,255,0.04); the row is the API authority.
- A negative dot-radius clamps to 0 instead of throwing IndexSizeError from ctx.arc (PC-3.4).
- A non-positive dotRadius or dotSpacing clears the canvas and paints nothing.
- The host publishes --detent-dot-field-height (100%, 8rem minimum) where upstream relied on h-full inside a sized wrapper.
- Attribute-derived values are reflected while connected.