Extrude
React + Tailwind
import { useEffect, useRef, useState } from 'react';
const W = 240;
const F = 46;
const D = 9;
const X0 = 6;
const X1 = W - 6 - D;
const at = (v: number) => X0 + 6 + (v / 100) * (X1 - X0 - 6);
const css = `
.slider-extrude { position: relative; width: ${W}px; height: 82px; }
.slider-extrude__svg { position: absolute; left: 0; top: 0; width: ${W}px; height: 58px; overflow: visible; }
.slider-extrude__slab-top { fill: light-dark(#ebedf0, #232529); }
.slider-extrude__slab-front { fill: light-dark(#dbdde1, #2e3035); }
.slider-extrude__top { fill: light-dark(#373a40, #f1f2f3); }
.slider-extrude__front { fill: light-dark(#50535b, #c6c8cd); }
.slider-extrude__end { fill: light-dark(#6d7179, #7d8087); }
.slider-extrude__ring { fill: none; stroke: transparent; stroke-width: 2; stroke-linejoin: round; }
.slider-extrude:has(.slider-extrude__input:focus-visible) .slider-extrude__ring { stroke: light-dark(#50535b, #c6c8cd); }
.slider-extrude__value { position: absolute; left: 0; right: 0; top: 62px; display: flex; justify-content: space-between; margin: 0; font-size: 12px; color: light-dark(#5f626a, #a7abb2); }
.slider-extrude__value b { color: light-dark(#373a40, #f1f2f3); font-weight: 500; font-variant-numeric: tabular-nums; }
.slider-extrude__input { position: absolute; left: ${X0}px; top: 0; width: ${X1 - X0 + 6}px; height: 58px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-extrude__input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 58px; }
.slider-extrude__input::-moz-range-thumb { width: 12px; height: 58px; border: 0; }
`;
export function ExtrudeSlider() {
const [v, setV] = useState(64);
const [held, setHeld] = useState(false);
const [shape, setShape] = useState({ x: at(64), h: 12 });
const st = useRef({ x: at(64), vx: 0, h: 12, vh: 0, raf: 0 });
// Length and height each ride a spring; holding the bar pushes the block up taller.
useEffect(() => {
const q = st.current;
const gx = at(v);
const gh = held ? 22 : 12;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
Object.assign(q, { x: gx, h: gh, vx: 0, vh: 0 });
setShape({ x: gx, h: gh });
return;
}
let last = performance.now();
const step = (now: number) => {
const dt = Math.min(0.032, (now - last) / 1000);
last = now;
q.vx += (-240 * (q.x - gx) - 28 * q.vx) * dt;
q.x += q.vx * dt;
q.vh += (-300 * (q.h - gh) - 14 * q.vh) * dt;
q.h += q.vh * dt;
setShape({ x: q.x, h: q.h });
if (Math.abs(q.x - gx) + Math.abs(q.h - gh) < 0.05 && Math.abs(q.vx) + Math.abs(q.vh) < 0.5) {
Object.assign(q, { x: gx, h: gh, vx: 0, vh: 0 });
setShape({ x: gx, h: gh });
return;
}
q.raf = requestAnimationFrame(step);
};
cancelAnimationFrame(q.raf);
q.raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(q.raf);
}, [v, held]);
const { x, h } = shape;
const pts = (...p: number[][]) => p.map((q) => q.join(',')).join(' ');
return (
<>
<style>
{css}
</style>
<div className="slider-extrude">
<svg className="slider-extrude__svg" aria-hidden="true">
{/* The flat track, seen from a little above: a top face and a thin front edge. */}
<polygon className="slider-extrude__slab-top" points={pts([X0, F], [X1, F], [X1 + D, F - D], [X0 + D, F - D])} />
<polygon className="slider-extrude__slab-front" points={pts([X0, F], [X1, F], [X1, F + 4], [X0, F + 4])} />
<polygon className="slider-extrude__slab-front" points={pts([X1, F], [X1 + D, F - D], [X1 + D, F - D + 4], [X1, F + 4])} />
{/* The filled length rises out of it as a solid block. */}
<polygon className="slider-extrude__front" points={pts([X0, F - h], [x, F - h], [x, F], [X0, F])} />
<polygon className="slider-extrude__top" points={pts([X0, F - h], [x, F - h], [x + D, F - D - h], [X0 + D, F - D - h])} />
<polygon className="slider-extrude__end" points={pts([x, F - h], [x + D, F - D - h], [x + D, F - D], [x, F])} />
<polygon className="slider-extrude__ring" points={pts([x - 4, F - h - 4], [x + D + 4, F - D - h - 4], [x + D + 4, F - D + 4], [x - 4, F + 4])} />
</svg>
<p className="slider-extrude__value" aria-hidden="true">
<span>Storage</span>
<b>{v} GB</b>
</p>
<input
className="slider-extrude__input"
type="range"
min={0}
max={100}
value={v}
onPointerDown={() => setHeld(true)}
onPointerUp={() => setHeld(false)}
onPointerCancel={() => setHeld(false)}
onChange={(e) => setV(+e.target.value)}
aria-label="Storage"
aria-valuetext={`${v} gigabytes`}
/>
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initSliderExtrude(el) on the mounted element instead.
HTML
<div class="slider-extrude">
<svg class="slider-extrude__svg" aria-hidden="true">
<polygon class="slider-extrude__slab-top" points="6,46 225,46 234,37 15,37"></polygon>
<polygon class="slider-extrude__slab-front" points="6,46 225,46 225,50 6,50"></polygon>
<polygon class="slider-extrude__slab-front" points="225,46 234,37 234,41 225,50"></polygon>
<polygon class="slider-extrude__front" points="6,34 148.32,34 148.32,46 6,46"></polygon>
<polygon class="slider-extrude__top" points="6,34 148.32,34 157.32,25 15,25"></polygon>
<polygon class="slider-extrude__end" points="148.32,34 157.32,25 157.32,37 148.32,46"></polygon>
<polygon class="slider-extrude__ring" points="144.32,30 161.32,21 161.32,41 144.32,50"></polygon>
</svg>
<p class="slider-extrude__value" aria-hidden="true">
<span>Storage</span>
<b>64 GB</b>
</p>
<input class="slider-extrude__input" type="range" min="0" max="100" aria-label="Storage" aria-valuetext="64 gigabytes" value="64"/>
</div>CSS
.slider-extrude { position: relative; width: 240px; height: 82px; }
.slider-extrude__svg { position: absolute; left: 0; top: 0; width: 240px; height: 58px; overflow: visible; }
.slider-extrude__slab-top { fill: light-dark(#ebedf0, #232529); }
.slider-extrude__slab-front { fill: light-dark(#dbdde1, #2e3035); }
.slider-extrude__top { fill: light-dark(#373a40, #f1f2f3); }
.slider-extrude__front { fill: light-dark(#50535b, #c6c8cd); }
.slider-extrude__end { fill: light-dark(#6d7179, #7d8087); }
.slider-extrude__ring { fill: none; stroke: transparent; stroke-width: 2; stroke-linejoin: round; }
.slider-extrude:has(.slider-extrude__input:focus-visible) .slider-extrude__ring { stroke: light-dark(#50535b, #c6c8cd); }
.slider-extrude__value { position: absolute; left: 0; right: 0; top: 62px; display: flex; justify-content: space-between; margin: 0; font-size: 12px; color: light-dark(#5f626a, #a7abb2); }
.slider-extrude__value b { color: light-dark(#373a40, #f1f2f3); font-weight: 500; font-variant-numeric: tabular-nums; }
.slider-extrude__input { position: absolute; left: 6px; top: 0; width: 225px; height: 58px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
.slider-extrude__input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 58px; }
.slider-extrude__input::-moz-range-thumb { width: 12px; height: 58px; border: 0; }JavaScript
function initSliderExtrude(root) {
var W = 240;
var F = 46;
var D = 9;
var X0 = 6;
var X1 = W - 6 - D;
var input = root.querySelector('.slider-extrude__input');
var front = root.querySelector('.slider-extrude__front');
var top = root.querySelector('.slider-extrude__top');
var end = root.querySelector('.slider-extrude__end');
var ring = root.querySelector('.slider-extrude__ring');
var label = root.querySelector('.slider-extrude__value b');
var held = false;
var x = at(+input.value);
var h = 12;
var vx = 0;
var vh = 0;
var raf = 0;
function at(v) { return X0 + 6 + (v / 100) * (X1 - X0 - 6); }
function pts() {
return Array.prototype.map.call(arguments, function (p) { return p.join(','); }).join(' ');
}
// The filled length rises out of the track as a block: a front face, a top and an end.
function draw() {
front.setAttribute('points', pts([X0, F - h], [x, F - h], [x, F], [X0, F]));
top.setAttribute('points', pts([X0, F - h], [x, F - h], [x + D, F - D - h], [X0 + D, F - D - h]));
end.setAttribute('points', pts([x, F - h], [x + D, F - D - h], [x + D, F - D], [x, F]));
ring.setAttribute('points', pts([x - 4, F - h - 4], [x + D + 4, F - D - h - 4], [x + D + 4, F - D + 4], [x - 4, F + 4]));
}
// Length and height each ride a spring; holding the bar pushes the block up taller.
function run() {
cancelAnimationFrame(raf);
var gx = at(+input.value);
var gh = held ? 22 : 12;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
x = gx;
h = gh;
return draw();
}
var last = performance.now();
function step(now) {
var dt = Math.min(0.032, (now - last) / 1000);
last = now;
vx += (-240 * (x - gx) - 28 * vx) * dt;
x += vx * dt;
vh += (-300 * (h - gh) - 14 * vh) * dt;
h += vh * dt;
if (Math.abs(x - gx) + Math.abs(h - gh) < 0.05 && Math.abs(vx) + Math.abs(vh) < 0.5) {
x = gx;
h = gh;
vx = vh = 0;
return draw();
}
draw();
raf = requestAnimationFrame(step);
}
raf = requestAnimationFrame(step);
}
function update() {
label.textContent = input.value + ' GB';
input.setAttribute('aria-valuetext', input.value + ' gigabytes');
run();
}
function down() {
held = true;
run();
}
function up() {
held = false;
run();
}
input.addEventListener('input', update);
input.addEventListener('pointerdown', down);
input.addEventListener('pointerup', up);
input.addEventListener('pointercancel', up);
return function () {
cancelAnimationFrame(raf);
input.removeEventListener('input', update);
input.removeEventListener('pointerdown', down);
input.removeEventListener('pointerup', up);
input.removeEventListener('pointercancel', up);
};
}
document.querySelectorAll('.slider-extrude').forEach(initSliderExtrude);Goal: Create a "Extrude" slider.
Visual behavior: A storage bar seen from a little above: the filled part rises out of the track as a solid block with shaded faces, and grows taller while you hold it.
Technique:
- A real <input type="range"> lies over the drawing, transparent (opacity 0, appearance none), with its thumb hit area sized to the drawn thumb, so dragging, clicking the track and the arrow, Page Up/Down, Home and End keys all work natively. The drawing is aria-hidden.
- An oblique projection: depth is drawn up and to the right at 45 degrees. The track is a flat top face with a thin front edge; the fill is a box of front, top and end polygons in three shades, with its end face at the thumb.
- Length and height ride separate springs in requestAnimationFrame; pressing raises the height target and the looser height spring overshoots as the block grows and drops back.
Accessibility: A native range input with an aria-label and an aria-valuetext in gigabytes; keyboard focus rings the end of the block. Under prefers-reduced-motion the block resizes without the springs.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Extrude" slider.
Visual behavior: A storage bar seen from a little above: the filled part rises out of the track as a solid block with shaded faces, and grows taller while you hold it.
Technique:
- A real <input type="range"> lies over the drawing, transparent (opacity 0, appearance none), with its thumb hit area sized to the drawn thumb, so dragging, clicking the track and the arrow, Page Up/Down, Home and End keys all work natively. The drawing is aria-hidden.
- An oblique projection: depth is drawn up and to the right at 45 degrees. The track is a flat top face with a thin front edge; the fill is a box of front, top and end polygons in three shades, with its end face at the thumb.
- Length and height ride separate springs in requestAnimationFrame; pressing raises the height target and the looser height spring overshoots as the block grows and drops back.
Accessibility: A native range input with an aria-label and an aria-valuetext in gigabytes; keyboard focus rings the end of the block. Under prefers-reduced-motion the block resizes without the springs.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
A storage bar seen from a little above: the filled part rises out of the track as a solid block with shaded faces, and grows taller while you hold it.
- Dependencies
- None
- Difficulty
- Intermediate
- Triggers
- state change, 3d, spring
- Techniques
- svg, spring, raf
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
A native range input with an aria-label and an aria-valuetext in gigabytes; keyboard focus rings the end of the block. Under prefers-reduced-motion the block resizes without the springs.