WebSynthThumb

Zudo Web Synth thumbnail: a wave display showing one sine cycle above three pointer knobs, in the shared static-page thumb frame.

Media & Icons

Default

List row (96px)

Hero (400px)

Size comparison

Frame parity with ManualsThumb

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for WebSynthThumb — one of the three /ref/ child thumbs (epic #2252). // The two sizes that matter are the hub's list row (96px, 120px from md) and // the hero rendering (~400px); both get their own variant so the glyph's // small-size legibility is checkable at a glance. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ManualsThumb from './manuals-thumb'; import WebSynthThumb from './web-synth-thumb'; const meta: StoryMeta = { title: 'WebSynthThumb', category: 'Media & Icons', description: 'Zudo Web Synth thumbnail: a wave display showing one sine cycle above three pointer knobs, in the shared static-page thumb frame.', usage: `import WebSynthThumb from '@/components/shared/web-synth-thumb';\n\n<div className="w-[96px]"><WebSynthThumb /></div>`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => ( <div className="w-[200px]"> <WebSynthThumb /> </div> ), }); export const ListRow = defineStory({ name: 'List row (96px)', render: () => ( <div className="w-[96px]"> <WebSynthThumb /> </div> ), }); export const Hero = defineStory({ name: 'Hero (400px)', render: () => ( <div className="w-[400px]"> <WebSynthThumb /> </div> ), }); export const SizeComparison = defineStory({ name: 'Size comparison', render: () => ( <div className="flex flex-wrap items-end gap-hgap-md"> <div className="w-[96px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">96px</p> <WebSynthThumb /> </div> <div className="w-[120px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">120px</p> <WebSynthThumb /> </div> <div className="w-[200px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">200px</p> <WebSynthThumb /> </div> <div className="w-[400px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">400px</p> <WebSynthThumb /> </div> </div> ), }); export const FrameParity = defineStory({ name: 'Frame parity with ManualsThumb', render: () => ( <div className="flex flex-wrap items-end gap-hgap-md"> <div className="w-[200px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">ManualsThumb</p> <ManualsThumb /> </div> <div className="w-[200px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">WebSynthThumb</p> <WebSynthThumb /> </div> </div> ), });