Aug 28, 2025
0 views
A lightweight tag/chip renderer for Framer. Feed it a comma-separated list and it outputs accessible, responsive pills with configurable padding, gap, border, and colors. If your primary typeface ships a “Variable” face (e.g., Recursive Variable), you can animate axes on hover for a subtle, high-end typographic feel.
//
Tags
Set Data to a comma-separated list, e.g. UI, Motion, Generative.
Choose Tag BG, Text, Hover BG; adjust Padding, Gap, and Border.
Enable Variable Font and tune Axes (MONO/CASL/CRSV/slnt/wght).
Toggle Hover Axes to morph typography on hover (e.g., wght: 600 → 700).
Bind to CMS by mapping a text field into Data.
Minimal: gap=6, padding=4px 8px, border width=0.
Bold hover: base wght=500 → hover wght=700; subtle bg shift.
Neutral UI chips: BG #F3F3F3, text #111, border #DDD, radius=8.
Parses data by commas → trims → filters empties → maps into <div> pills.
Computes a font stack; if Variable Font is on, first family is coerced to its " Variable" face (e.g., Recursive → Recursive Variable).
Builds CSS font-variation-settings strings from Axes; if "wght" is present, CSS font-weight is omitted to avoid conflicts.
On hover, swaps background and (optionally) variation settings for smooth axis interpolation.
Static layout—no RAF, no listeners.
Prefer shorter tag lists for mobile; keep Gap small to reduce line wraps.
When animating wght, keep deltas modest (e.g., 500→650) for cleaner interpolation.
Works in modern evergreen browsers.
Variable-font axes require a variable face installed/loaded; otherwise fallback to classic font-weight.
Right-to-left languages: tags render left-to-right by default; wrap in an RTL container if needed.
Tags are static text by default; if interactive, wrap each in a button/link and provide aria-labels.
Ensure color contrast for text vs. background (WCAG AA).
No dangerouslySetInnerHTML; tags are plain strings.
No network calls; no data stored.
Be mindful not to inject untrusted CSS tokens into data.
Tags are static text by default; if interactive, wrap each in a button/link and provide aria-labels.
Ensure color contrast for text vs. background (WCAG AA).
No dangerouslySetInnerHTML; tags are plain strings.
No network calls; no data stored.
Be mindful not to inject untrusted CSS tokens into data.
Component design & implementation by SecretoCho Design.
SecretoCho Design 2025
Provided “as is.” Validate accessibility, licensing for fonts, and performance in your project before shipping.
Stay ahead of the curve with insights into emerging visualization trends and technologies.