デテント
détente
止め
Raste
encaje
Examples
Playground
Docs
GitHub
Playground
Every visual prop of
<Detent>
, indicator included, live. Throw it while you change things.
Example
words
numbers
images
actions
take this with you
go
Cobalt
typography
ok
Ember
magnificent
Meadow
x
Glacier
detent
is
Harbor
incredible
go
Cobalt
typography
ok
Ember
magnificent
Meadow
x
Glacier
detent
is
Harbor
incredible
Indicator
docs
lens refraction
Bends the rows near the edges of the selection marker while keeping its center clear. Scroll slowly to see content pass through the lens.
0.75
RGB dispersion
Adds red and blue fringes near the refracting edges. Enable lens refraction, then look at the edges as a row enters the marker.
0.65
inverse refraction
Moves the strongest refraction to the center of the marker. Unlike the normal lens, this also distorts the selected content.
landing response
A brief compression and rebound of the marker when a moving wheel settles. Give it a throw and watch the landing. Works with rounded and pill shapes.
0.35
shape
The selection marker: a filled box, lines, brackets, dot or needle. None hides the marker while keeping selection and input active.
rounded
pill
lines
underline
brackets
dot
needle
none
material
Changes how rounded and pill markers are drawn. Glass adds a translucent surface; outline and gradient-border leave the center open.
solid
glass
outline
gradient-border
fit
Band spans the wheel. Content hugs the selected row and animates its width as you move between short and long items.
band
content
width logic
With content fit, smart holds a stable width during fast throws and catches the target near landing. Naive recomputes the width from passing rows every frame; compare short and long words.
smart
naive
side padding
18
shadow
Adds a small shadow beneath the selection marker to lift it off the wheel. Available for solid and glass boxes.
adaptive color
Gives each item a stable color and lets the marker follow the selection. Try a solid, outline or gradient-border marker; glass keeps its neutral surface.
not used by this marker
magnify (1 = off)
Enlarges content only inside the selection band. At 1 the magnifier is off; small values above 1 keep the effect subtle.
1.12
Drum
docs
perspective
Camera distance for the 3D drum, in pixels. Lower values exaggerate depth; 0 removes perspective.
800
curvature
How far rows bend around the drum. At 0 the list is flat; higher values make the outer rows turn away more.
0.75
radius (0 = auto)
The cylinder radius in pixels. A larger radius gives a flatter drum. Leave it at 0 to derive the radius automatically from the row size.
0
tilt x
Tilts the whole drum forward or backward. This changes the viewing angle, not the scroll direction.
0
tilt y
Tilts the whole drum to the left or right. Try a small angle to reveal its depth.
0
skew
Shears the drum diagonally without rotating it. Small values add a slanted, editorial feel.
0
align
start
center
end
Rows by distance
docs
fade
Reduces each row’s opacity with distance from the selection. This fades the entire row, including images and icons.
0.14
scale
Shrinks rows as they move away from the center. Keep it small for a gentle focus on the selection.
0.02
blur
Blurs individual rows according to their distance from the center. This is separate from gradient blur at the drum’s edges.
0
dim
Mutes rows away from the center so the selected content has more contrast. Compare with fade to choose the quieter effect.
0.28
spacing
Adds visual spacing progressively away from the center. The selected row keeps its normal position.
0
easing
How quickly distance-based effects build up away from the center. Quad and cubic keep more of the middle calm. This does not change the motion spring.
linear
quad
cubic
Depth and surface
docs
gradient blur
Builds a gradual blur toward the drum’s edges, like looking through a soft cover. The selected area stays clear.
mask
Gradient fades the drum into its background at the edges. None keeps the outer boundary sharp.
gradient
none
mask size %
How much of each edge is used for the gradient fade, as a percentage of the wheel. It affects the mask, not each row’s fade setting.
28
inner shadow
Shades the inside edges to make the drum feel recessed. This is separate from the selection marker’s shadow.
glare
Adds a quiet reflection over the drum, as if it were under glass.
center light
Brightens rows as they pass through the center. A small amount helps the selection catch the light.
0.12
selection depth (px)
Brings the selected row forward and its neighbors back. With perspective, this adds depth without a large magnifier.
6
blur strength
The strongest blur at the outer edge. It takes effect only while gradient blur is enabled.
8
blur layers
The number of overlapping blur layers. More layers make the gradient smoother but cost more to render; 4–6 is a useful starting point.
6
Motion and feedback
docs
wheel mode
Auto adapts to mouse notches and trackpads. Step favors discrete rows; smooth follows continuous scroll deltas. Try your actual mouse or trackpad.
auto
smooth
step
motion blur (px)
Softens rows in the direction of movement, in proportion to speed. Give the wheel a fast throw; everything becomes sharp again at rest.
1.5
velocity tilt (deg)
Leans moving rows with their speed and direction, up to this angle. The tilt returns to zero when the wheel stops.
0.75
grip
A short visual absorption when you catch a moving wheel with the pointer. Throw it, then grab it before it stops. Grabbing a resting wheel has no effect.
0.5
elastic rows
Lets outer rows trail behind movement and then recover their exact spacing. Try a sustained drag and a change of direction.
0.5
hold-key acceleration
Holding an arrow key increases the repeat speed after 2 seconds, then again after 4. Release the key to reset the speed.
preset
A starting feel for inertia and snapping. iOS is balanced, snappy settles quickly, heavy feels weightier, and elastic allows a softer rebound.
ios
scroll
snappy
heavy
elastic
linear
tick sound
dynamic timbre
Fast ticks sound brighter; slow ticks sound more defined. Enable tick sound and compare a slow drag with a fast throw.
haptics
A short vibration for each tick on supported devices. Unsupported browsers simply skip vibration.
Layout
docs
infinite loop
Wraps the last item back to the first for continuous scrolling. Turn it off to try the elastic ends of a finite list.
orientation
vertical
horizontal
item size
The pitch of each row in pixels: its height vertically, or its width horizontally. Changing orientation also applies a size suited to this example.
44
visible
How many rows fit in the drum. Odd counts keep one row centered. On phones, the preview is capped at five rows; copied code keeps your chosen count.
7
gap
0