Skip to content

Instantly share code, notes, and snippets.

@mike-at-redspace

mike-at-redspace/index.html

Created September 26, 2025 10:56
Show Gist options
  • Save mike-at-redspace/8fdf299c79100d1f929e74a9ab5e87e3 to your computer and use it in GitHub Desktop.
Save mike-at-redspace/8fdf299c79100d1f929e74a9ab5e87e3 to your computer and use it in GitHub Desktop.
Download ZIP
variant picker styles 👨‍🍳
Raw
index.html
<svg class="sr-only">
<filter id="knockout-black" colorInterpolationFilters="sRGB">
<feColorMatrix
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
-1 -1 -1 0 1"
/>
<feComposite in="SourceGraphic" operator="out" />
</filter>
<filter id="knockout-white" colorInterpolationFilters="sRGB">
<feColorMatrix
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
1 1 1 0 0"
/>
<feComposite in="SourceGraphic" operator="out" />
</filter>
<!-- only to punch out red -->
<!-- <feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 0 1 1 1 1 1 1"/>
</feComponentTransfer> -->
</svg>
<div class="resize-container">
</div>
<svg class="svg-mask" xmlns="http://www.w3.org/2000/svg"></svg>
<a
aria-label="Follow Jhey"
class="bear-link"
href="https://twitter.com/intent/follow?screen_name=jh3yy"
target="_blank"
rel="noreferrer noopener"
>
<svg
class="w-9"
viewBox="0 0 969 955"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="161.191"
cy="320.191"
r="133.191"
stroke="currentColor"
stroke-width="20"
></circle>
<circle
cx="806.809"
cy="320.191"
r="133.191"
stroke="currentColor"
stroke-width="20"
></circle>
<circle
cx="695.019"
cy="587.733"
r="31.4016"
fill="currentColor"
></circle>
<circle
cx="272.981"
cy="587.733"
r="31.4016"
fill="currentColor"
></circle>
<path
d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
fill="currentColor"
></path>
<rect
x="310.42"
y="448.31"
width="343.468"
height="51.4986"
fill="#FF1E1E"
></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
fill="currentColor"
></path>
</svg>
</a>
Raw
script.babel
import gsap from 'https://cdn.skypack.dev/[email protected]'
import Draggable from 'https://cdn.skypack.dev/[email protected]/Draggable'
import { Pane } from 'https://cdn.skypack.dev/[email protected]'
gsap.registerPlugin(Draggable)
// for a radio that uses hop, we can track the direction on change/input
const resizeContainer = document.querySelector('.resize-container')
let fieldset
let fields
let radios
let labels
let initialChecked
let initialIndex = 0
let maskContainer
// Track [current, previous] indices - only ever 2 items
let checkedIndices
// Fast lookup function using cached positions
const svgMask = document.querySelector('.svg-mask')
const config = {
theme: 'system',
style: 'hop',
match: true,
wrap: true,
knockout: 'filter',
duration: 0.2,
variants: 5,
options: ['128GB', '256GB', '512GB', '1TB', '2TB', '4TB', '8TB'],
}
const ctrl = new Pane({
title: 'config',
})
const buildFieldsets = () => {
resizeContainer.innerHTML = `
<div class="fields">
<div class="pill"></div>
<fieldset>
<legend>capacity</legend>
<div class="content">
${new Array(config.variants).fill().map((_, i) => `
<label for="${config.options[i]}">
<span class="variant-option__button-label__text">${config.options[i]}</span>
</label>
<input class="sr-only" ${i === initialIndex ? 'checked data-current-checked="true"' : ''} data-input-index="${i}" aria-label="${config.options[i]}" type="radio" name="capacity" value="${config.options[i]}" id="${config.options[i]}">
`).join('')}
</div>
</fieldset>
<fieldset aria-hidden="true" class="mask-layer">
<legend>capacity</legend>
${new Array(config.variants).fill().map((_, i) => `
<label>
<span class="variant-option__button-label__text">${config.options[i]}</span>
</label>
`).join('')}
</fieldset>
</div>
`
fields = resizeContainer.querySelector('.fields')
fieldset = resizeContainer.querySelector('fieldset')
radios = [...fieldset.querySelectorAll('input')]
labels = [...fieldset.querySelectorAll('label')]
maskContainer = resizeContainer.querySelector(
'fieldset:first-of-type > div',
)
initialChecked = fieldset.querySelector('input:checked')
initialIndex = radios.indexOf(initialChecked)
// Track [current, previous] indices - only ever 2 items
checkedIndices = [initialIndex]
fieldset.style.setProperty(
'--pill-width',
`${labels[initialIndex].offsetWidth}px`,
)
initialChecked.dataset.currentChecked = true
}
buildFieldsets()
ctrl.addBinding(config, 'variants', {
min: 2,
max: config.options.length,
step: 1,
}).on('change', buildFieldsets)
ctrl.addBinding(config, 'duration', {
min: 0,
max: 2,
step: 0.01,
})
ctrl.addBinding(config, 'style', {
options: {
anchor: 'anchor',
hop: 'hop',
},
})
const wrap =ctrl.addBinding(config, 'wrap', {
hidden: config.style !== 'hop',
})
const match = ctrl.addBinding(config, 'match', {
hidden: config.style !== 'hop',
})
const knockout = ctrl.addBinding(config, 'knockout', {
options: {
filter: 'filter',
mask: 'mask',
none: 'none',
},
hidden: config.style === 'hop',
})
ctrl.addBinding(config, 'theme', {
label: 'theme',
options: {
system: 'system',
light: 'light',
dark: 'dark',
},
})
const update = () => {
document.documentElement.dataset.theme = config.theme
document.documentElement.dataset.style = config.style
document.documentElement.dataset.match = config.match
document.documentElement.dataset.knockout = config.knockout
document.documentElement.dataset.wrap = config.wrap
document.documentElement.style.setProperty('--duration', config.duration)
knockout.hidden = config.style === 'hop'
match.hidden = wrap.hidden = config.style !== 'hop'
ctrl.refresh()
}
const sync = (event) => {
if (
!document.startViewTransition ||
event.target.controller.view.labelElement.innerText !== 'theme'
)
return update()
document.startViewTransition(() => update())
}
ctrl.on('change', sync)
// tell styles if config is raw
const isRaw = new URLSearchParams(window.location.search).get('raw') === 'true'
if (isRaw) document.documentElement.dataset.raw = 'true'
// Draggable controls
const tweakClass = 'div.tp-dfwv'
const d = Draggable.create(tweakClass, {
type: 'x,y',
allowEventDefault: true,
trigger: tweakClass + ' button.tp-rotv_b',
})
document.querySelector(tweakClass).addEventListener('dblclick', () => {
gsap.to(tweakClass, {
x: `+=${d[0].x * -1}`,
y: `+=${d[0].y * -1}`,
onComplete: () => {
gsap.set(tweakClass, { clearProps: 'all' })
},
})
})
update()
// Add your prototype logic here...
const updateMask = () => {
const { left, top } = maskContainer.getBoundingClientRect()
svgMask.setAttribute(
'viewBox',
`0 0 ${maskContainer.offsetWidth} ${maskContainer.offsetHeight}`,
)
const maskString = new Array(radios.length)
.fill()
.map((_, i) => {
const { x, y, width, height } = labels[i].getBoundingClientRect()
return `<rect x="${x - left}" y="${y - top}" width="${width}" height="${height}" rx="${height * 0.5}" ry="${height * 0.5}" fill="#000"></rect>`
})
.join('')
svgMask.innerHTML = maskString
const encoded = encodeURIComponent(svgMask.outerHTML)
.replace(/'/g, '%27')
.replace(/"/g, '%22')
const dataUri = `data:image/svg+xml;utf8,${encoded}`
document.documentElement.style.setProperty('--svg-mask', `url(${dataUri})`)
}
const resizeHandler = new ResizeObserver(() => {
if (
config.style === 'anchor'
) {
updateMask()
if (!CSS.supports('anchor-name: --active')) {
cacheBase()
syncChecked()
}
}
})
resizeHandler.observe(resizeContainer)
const positions = []
// syncs the positions of the labels
const syncChecked = () => {
const checked = fieldset.querySelector(':checked')
const index = radios.indexOf(checked)
fields.style.setProperty('--top', positions[index].top)
fields.style.setProperty('--left', positions[index].left)
fields.style.setProperty('--width', positions[index].width)
fields.style.setProperty('--height', positions[index].height)
fields.style.setProperty('--marker-top', positions[index].top)
fields.style.setProperty('--marker-left', positions[index].left)
}
// this caches the positions of the labels
const cacheBase = () => {
console.info('cacheing')
const { x: fieldX, y: fieldY } = fields.getBoundingClientRect()
const { x, y } = fieldset.querySelector('label').getBoundingClientRect()
fields.style.setProperty('--left', x - fieldX)
fields.style.setProperty('--top', y - fieldY)
console.info({fieldX, fieldY, x, y})
document.documentElement.style.setProperty('--marker-top', y - fieldY)
document.documentElement.style.setProperty('--marker-left', x - fieldX)
positions.length = 0
for (const label of labels) {
const { height, width, left, top } = label.getBoundingClientRect()
positions.push({
width,
height,
left: left - fieldX,
top: top - fieldY,
})
}
}
resizeContainer.addEventListener('input', (event) => {
// const currentIndex = radios.indexOf(event.target
// )
if (config.style === 'hop') {
const inputIndex = Number.parseInt(event.target.dataset.inputIndex || '');
const [currentIndex, previousIndex] = checkedIndices;
if (currentIndex !== undefined && radios[currentIndex]) {
radios[currentIndex].dataset.previousChecked = 'false';
}
if (previousIndex !== undefined && radios[previousIndex]) {
radios[previousIndex].dataset.previousChecked = 'false';
}
// Update checked indices array - keep only the last 2 selections
checkedIndices.unshift(inputIndex);
checkedIndices.length = Math.min(checkedIndices.length, 2);
// Update the new states
const newCurrentIndex = checkedIndices[0]; // This is always inputIndex
const newPreviousIndex = checkedIndices[1]; // This might be undefined
// newCurrentIndex is guaranteed to exist since we just added it
if (newCurrentIndex !== undefined && radios[newCurrentIndex]) {
radios[newCurrentIndex].dataset.currentChecked = 'true';
fieldset.style.setProperty(
'--pill-width-current',
`${radios[newCurrentIndex].previousElementSibling?.offsetWidth || 0}px`
);
}
if (newPreviousIndex !== undefined && radios[newPreviousIndex]) {
radios[newPreviousIndex].dataset.previousChecked = 'true';
radios[newPreviousIndex].dataset.currentChecked = 'false';
fieldset.style.setProperty(
'--pill-width-previous',
`${radios[newPreviousIndex].previousElementSibling?.offsetWidth || 0}px`
);
}
} else if (config.style === 'anchor') {
if (!CSS.supports('anchor-name: --active')) {
syncChecked()
}
}
})
// need to polyfill for cases where anchor positioning is not supported
if (!CSS.supports('anchor-name: --active')) {
console.info('polyfill anchor positioning by cacheing positions + sizes')
requestAnimationFrame(() => {
cacheBase()
syncChecked()
fields.dataset.initiated = true
})
}
Raw
style.css
@import url('https://unpkg.com/normalize.css') layer(normalize);
@layer normalize, base, prototype, anchor, hop, knockout;
@layer knockout {
.svg-mask {
outline-offset: -2px;
position: absolute;
inset: 0;
height: 100%;
width: 100%;
pointer-events: none;
z-index: 2;
translate: 0 100%;
}
[data-knockout='mask'][data-style='anchor'] fieldset:first-of-type > div {
mask: var(--svg-mask, initial);
}
[data-knockout='none'] .mask-layer,
[data-knockout='mask'] .mask-layer {
display: none;
}
[data-knockout='filter'][data-style='anchor'] {
.mask-layer {
filter: url(#knockout-black);
}
@media (prefers-color-scheme: dark) {
.mask-layer {
filter: url(#knockout-white);
}
}
}
}
@layer hop {
[data-match='true'][data-style='hop'] {
label::before {
inset: unset;
top: 0;
left: 0;
bottom: 0;
width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
}
label:has(+ :not(:checked) ~ :checked)::before,
label:has(+ [data-current-checked='true']):has(~ [data-previous-checked='true'])::before {
right: 0;
left: unset;
}
label:has(+ [data-previous-checked='true'])
~ label:has(+ [data-current-checked='true'])::before,
label:has(+ [data-current-checked='true']) ~ label::before {
left: 0;
right: unset;
}
}
[data-style='hop'] {
label {
position: relative;
background: #0000;
overflow: hidden;
}
label::before {
content: '';
position: absolute;
inset: 0;
border-radius: 100px;
z-index: -1;
width: 100%;
}
label:hover {
background: light-dark(
color-mix(in srgb, canvasText, #0000 95%),
color-mix(in srgb, canvasText, #fff0 75%)
);
}
/* the labels that precede a checked option */
label:has(+ :not(:checked) ~ :checked)::before {
transform: translateX(100%);
}
/* the last checked that comes after the current checked */
label:has(+ [data-current-checked='true']) ~ label::before {
transform: translateX(-100%);
}
label:has(+ [data-previous-checked='true'])::before,
label:has(+ [data-current-checked='true'])::before {
background: light-dark(#000, #fff);
transition: transform calc(var(--duration, 0.2) * 1s) ease-out;
}
}
[data-style='hop'][data-wrap='true'] {
fieldset:first-of-type:has(:nth-of-type(3)) {
label:has(+ [data-current-checked='true']):first-of-type ~ label:last-of-type::before {
transform: translateX(100%);
}
label:not(:has(+ [data-current-checked='true'])):first-of-type:has(
~ input:last-of-type:checked
)::before {
transform: translateX(-100%);
}
}
}
}
@layer anchor {
@supports (not (anchor-name: --active)) {
.fields {
position: relative;
}
.pill {
top: calc(var(--top, 0) * 1px);
left: calc(var(--left, 0) * 1px);
height: calc(var(--height, 0) * 1px);
width: calc(var(--width, 0) * 1px);
}
.fields[data-initiated='true'] .pill {
transition-property: left, top, width;
transition-duration: calc(var(--duration, 0.2) * 1s);
transition-timing-function: ease-out;
}
}
@supports (anchor-name: --active) {
.pill {
top: anchor(top);
left: anchor(left);
width: anchor-size(width);
height: anchor-size(height);
position-anchor: --active;
transition-property: left, top, width;
transition-duration: calc(var(--duration, 0.2) * 1s);
transition-timing-function: ease-out;
}
label:has(+ :checked) {
anchor-name: --active;
}
}
[data-style='anchor'] {
.pill {
display: inline-block;
background: light-dark(#000, #fff);
position: absolute;
border-radius: 100px;
}
fieldset {
&:first-of-type {
position: relative;
}
&:last-of-type {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 2;
/* makes room for the legend */
clip-path: inset(1lh 0 0 0);
}
}
label:has(+ :checked) {
background: #0000;
}
.mask-layer {
display: inline-flex;
background: light-dark(#fff, #000);
legend {
opacity: 0;
}
label {
color: light-dark(#000, #fff);
background: light-dark(#000, #fff);
border: 1px solid light-dark(#000, #fff);
}
}
}
}
@layer prototype {
.resize-container {
resize: both;
overflow: auto;
position: relative;
width: 360px;
height: 195px;
font-family: 'DM Mono', monospace;
padding: 2rem;
}
.fields {
position: relative;
}
fieldset {
border: 0;
}
fieldset, fieldset > div {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
}
legend {
font-size: 0.875rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
font-variant: small-caps;
translate: 1ch 0;
}
fieldset label {
padding: 0.5rem 1rem;
border-radius: 100px;
background: #0000;
border: 1px solid color-mix(in srgb, canvasText, canvas);
cursor: pointer;
white-space: nowrap;
transition-property: color, background;
transition-duration: calc(var(--duration, 0.2) * 1s), 0.2s;
transition-timing-function: ease-out;
user-select: none;
&:hover {
background: light-dark(
color-mix(in srgb, canvasText, #0000 95%),
color-mix(in srgb, canvasText, #fff0 75%)
);
}
}
label:has(+ :checked) {
background: light-dark(#000, #fff);
color: light-dark(#fff, #000);
}
.pill {
z-index: -1;
}
.mask-layer,
.pill {
display: none;
}
}
@layer base {
:root {
--font-size-min: 16;
--font-size-max: 20;
--font-ratio-min: 1.2;
--font-ratio-max: 1.33;
--font-width-min: 375;
--font-width-max: 1500;
}
html {
color-scheme: light dark;
}
[data-theme='light'] {
color-scheme: light only;
}
[data-theme='dark'] {
color-scheme: dark only;
}
[data-raw='true'] div.tp-dfwv {
display: none;
}
[data-raw='true'] {
scrollbar-color: #0000 #0000;
}
:where(.fluid) {
--fluid-min: calc(
var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
);
--fluid-max: calc(
var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
);
--fluid-preferred: calc(
(var(--fluid-max) - var(--fluid-min)) /
(var(--font-width-max) - var(--font-width-min))
);
--fluid-type: clamp(
(var(--fluid-min) / 16) * 1rem,
((var(--fluid-min) / 16) * 1rem) -
(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
(var(--fluid-preferred) * var(--variable-unit, 100vi)),
(var(--fluid-max) / 16) * 1rem
);
font-size: var(--fluid-type);
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: light-dark(#fff, #000);
display: grid;
place-items: center;
min-height: 100vh;
font-family:
'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue', Helvetica,
Arial, sans-serif, system-ui;
}
body::before {
--size: 45px;
--line: color-mix(in hsl, canvasText, transparent 80%);
content: '';
height: 100vh;
width: 100vw;
position: fixed;
background:
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size))
calc(var(--size) * 0.36) 50% / var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
calc(var(--size) * 0.32) / var(--size) var(--size);
mask: linear-gradient(140deg, #0000 65%, #fff);
top: 0;
transform-style: flat;
pointer-events: none;
z-index: -1;
}
.bear-link {
color: canvasText;
position: fixed;
top: 1rem;
left: 1rem;
width: 48px;
aspect-ratio: 1;
display: grid;
place-items: center;
opacity: 0.8;
}
:where(.x-link, .bear-link):is(:hover, :focus-visible) {
opacity: 1;
}
.bear-link svg {
width: 75%;
}
/* Utilities */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
div.tp-dfwv {
width: 256px;
view-transition-name: prototype-config;
}
Raw
variant-picker-styles.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment