The tacosdedatos component collection
A shared visual language for the web and video. Browse the primitives, play with motion, and bring the source into your next project.
65 items in the collection
Uppercase tracked kicker.
<Label>Una idea a la vez</Label>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/labelDisplay heading, 800 weight.
<Big size={76}>Ideas que se entienden.</Big>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/bigRaised surface; dark variant for code.
<Card dark><Big color={color.bg}>Surface</Big></Card>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/cardOutline, accent or solid pill; sans or mono.
<Chip accent>Accent</Chip>
<Chip mono>Mono</Chip>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/chipLabel, big value, sub; stacked or row layout.
<StatCard label="Contexto" value="1M" sub="tokens" />
<StatCard row label="Latencia" value="0.8s" w={620} h={140} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/stat-cardSentence in an accent, ink or note pill.
<Callout variant="note">Al final, cómo se usa.</Callout>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/calloutArrow or dot list.
<BulletList items={["El contexto", "La pregunta"]} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/bullet-listtacosdedatos lockup.
<Brand tagline="Ideas, datos y código." />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/brandPaper cut-out primitives: Paper shape, Sticker (slanted note with display type), Caption.
<Sticker size={72} rotate={-5}>¿otra vez?</Sticker>
<Paper tone="paper" w={300} h={200} rotate={-2} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/paperA labelled divider with ink or vermilion emphasis and two line weights.
<Rule label="El siguiente capítulo" accent strong />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/ruleA text anchor with an optional arrow and visible hover and keyboard focus.
<ActionLink href="/ideas">Explora las ideas</ActionLink>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/action-linkA numbered record with optional evidence, linked title, and active state.
<IndexRow index="01" title="El contexto" evidence="Empieza con una pregunta." href="/contexto" active />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/index-rowAn editorial figure label, caption, and provenance that wraps on narrow screens.
<figure>
<img src="/chart.png" alt="Descripción del gráfico" />
<FigureCaption index="01" provenance="Fuente: nuestro estudio">
Menos ruido. Más señal.
</FigureCaption>
</figure>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/figure-captionAdmission-style surface with a colored header, flexible body, and perforated footer stub.
<Ticket header="ADMIT ONE · OCT 2026" stub="Tu nombre · Tu comunidad" tone="accent">
<h3>Un lugar para crear.</h3>
<p>Trae tu curiosidad.</p>
</Ticket>
// Work order: compose the same header and stub slots.
<Ticket header="orden de trabajo" stub={<>Hecho es:<br />Las pruebas pasan.</>}>
<h3>Migrar los pagos</h3>
<p>Del cliente anterior al nuevo.</p>
</Ticket>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/ticketMessages with optional speakers and tails, incoming/outgoing alignment, and three palette tones.
<ChatBubble speaker="Tú" side="end" tone="accent">
Una pieza a la vez.
</ChatBubble>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/chat-bubbleA read-only score meter with endpoint labels and a controlled marker.
<ScoreScale label="Claridad" value={6} min={0} max={10}
labels={["Por explorar", "Lista para compartir"]} />
// Read-only meter; clamps values to the range.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/score-scaleDatos ilustrativos · escala 0–100
Readable comparison rows on a shared zero-based scale, with optional emphasis.
<ComparisonBars max={100} items={[
{ label: "Contexto", value: 42 },
{ label: "Una idea clara", value: 90, highlight: true },
]} />
// Values must be nonnegative; max must cover all values.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/comparison-barsA deterministic analog clock and time label. Supply time explicitly for web or video.
<Clock hours={8} minutes={30} size={64} />
// Explicit time keeps rendering deterministic. No autoplay.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/clockThe existing ChatBubble with selected words highlighted by TextFill.
<Burbuja words={["Podemos", "reutilizar", "componentes."]}
highlight={[1]} progress={1} speaker="Tú" />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/burbujaMetadata fields with YAML delimiters, emphasis, dimming, and stacked layout.
import { Frontmatter } from "./jbm/ui/frontmatter"
<Frontmatter stacked rows={[{ key: "name", value: "pdf-processing", highlight: true }]} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/frontmatterPaper illustrations of interface elements. Each component has its own preview and installation.
Illustrated button with paper, ink, and accent tones.
<UiButton w={220} h={70} tone="accent" />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/ui-buttonIllustrated text field with a controllable cursor.
<UiInput w={220} h={70} cursorOn />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/ui-inputIllustrated card with a picture and text bars.
<UiCard w={220} h={170} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/ui-cardChoose a button, input, or card illustration by kind.
<Piece kind="button" w={220} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/piecePhone silhouette that holds your own content.
<PhoneFrame w={420} h={780}>{children}</PhoneFrame>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/phone-frameCheck and cross badges in paper, ink, and accent tones.
<Badge kind="check" size={44} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/badgeColor, typography, and spacing illustrations.
<TokenGlyph kind="color" size={150} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/token-glyphFolded paper illustration with optional label and accent heading.
<Document label="idea.md" accent style={{ width: 180 }} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/documentLabelled folder illustration with a controlled open state. No built-in autoplay.
<Folder label="Ideas" open={0.6} />
// open: 0 (closed) to 1 (open); no internal timer.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/folderA fixed-size filing drawer with complete folders packed front to back.
<svg viewBox="0 -260 500 600">
<Cajon x={40} folders={[{name:"datos", pulled:0.5}]} open={1} />
</svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/cajonA shallow paper tray with optional sheets.
<svg viewBox="0 0 400 250">
<Bandeja x={60} y={120} layers={3} />
</svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/bandejaAn empty divided desktop organizer.
<svg viewBox="0 0 400 250">
<ToolCaddy x={80} y={40} />
</svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/tool-caddyAn independent hand illustration with open, pointing and pinching poses.
<Hand pose="pinch" width={160} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/handA reusable cabinet containing a controlled filing drawer.
<svg viewBox="0 -260 500 650">
<FileCabinet x={80} folders={[{name:"datos"}]} open={1} />
</svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/file-cabinetIndependent wire clip for paper edges.
import { PaperClip } from "./jbm/ui/paper-clip"
<PaperClip width={26} height={48} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/paper-clipPaper note with an optional independent clip, rotation, and paper tones.
import { ClippedNote } from "./jbm/ui/clipped-note"
<ClippedNote clip rotate={-3}>Revisar el resultado.</ClippedNote>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/clipped-noteCard-stock label with a punched hole and configurable content.
import { PunchedTag } from "./jbm/ui/punched-tag"
<PunchedTag tone="ink">Modelo</PunchedTag>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/punched-tagControlled ink impression with press and angle controls.
import { Stamp } from "./jbm/ui/stamp"
<Stamp text="REVISADO" press={0.9} angle={-7} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/stampIndependent folded paper checkpoint marker.
import { TapeMarker } from "./jbm/ui/tape-marker"
<TapeMarker label="parar aquí" />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/tape-markerFeeding paper with shared coordinates for writing, markers, and attached notes.
import { PaperTape, paperAt } from "./jbm/ui/paper-tape"
<PaperTape length={700} window={320} markers={[{ id: "review", at: 520, label: "revisar" }]} />
// paperAt(700, 520) === 180: marks and attachments share this origin.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/paper-tapeNested folders and documents with independent extraction and rigid-object reveal.
import { FolderContents } from "./jbm/ui/folder-contents"
<FolderContents open={1} sheet="README.md" label="proyecto" entries={[{ id: "assets", label: "assets/", document: "notas.md", documentReveal: 1 }]} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/folder-contentsLoading preview…
Full-bleed canvas frame.
<Scene><Big>Una idea a la vez.</Big></Scene>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/sceneLoading preview…
Compose timed blocks with explicit portrait layouts, orientation overrides, and configurable safe areas.
Render inside a Remotion composition or Player. Timing values are in seconds.
<SceneFromSpec spec={scenes.scenes[0]} orientation="landscape" host={{ resolve: phrase => timings[phrase] }} />
// Set composition: { layout: "headline-illustration", safeArea: "full" }.
// variants.vertical overrides blocks, headlineRatio, gap, or subjectScale. See docs/scene-spec.md.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/scene-specAn empty desk with separate finish and optional file cabinet.
<svg viewBox="0 0 820 500">
<Escritorio box={{x:30,y:30,w:760,h:420}}
cabinet spec={{finish:"wood",drawerSide:"end"}}
folders={[{name:"datos"}]} open={1} />
</svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/escritorioClick to replay · 100%
Controlled replay icon that charges from tail to arrowhead. Supply progress and charging state from any animation.
<ReplayButton
progress={progress} // 0–1 from your animation
charging={isPlaying}
onReplay={restartAnimation}
label="Replay animation"
/>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/replay-buttonLoading preview…
Spring entrance + Stagger + Leave (exit).
Render inside a Remotion composition or Player. Timing values are in seconds.
<Stagger at={0.2} step={0.35}>
{["Idea", "Datos"].map(text => <Chip key={text}>{text}</Chip>)}
</Stagger>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/popLoading preview…
Number counting up.
Render inside a Remotion composition or Player. Timing values are in seconds.
<Counter n={1024} at={0.2} dur={1.5} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/counterLoading preview…
Labelled probability bar that fills.
Render inside a Remotion composition or Player. Timing values are in seconds.
<ProbBar label="Confianza" p={0.86} at={0.2} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/prob-barLoading preview…
Dark code card that types each line in place.
Render inside a Remotion composition or Player. Timing values are in seconds.
<CodeCard title="hello.ts" charsPerSecond={32} lines={[
{ t: "const idea = \"simple\"", at: 0.2 },
]} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/code-cardLoading preview…
Kinetic subtitle pill from aligned words.
Render inside a Remotion composition or Player. Timing values are in seconds.
<Captions words={[
{ w: "Una", s: 0, e: 0.7 },
{ w: "idea.", s: 0.7, e: 1.5, emph: true },
]} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/captionsLoading preview…
A phone screen built piece by piece, then rebuilt on new screens on each cue; Stamp for a loud sticker.
Render inside a Remotion composition or Player. Timing values are in seconds.
<RebuildScreens w={936} h={1000}
pieces={[{ kind: "button", at: 1 }, { kind: "input", at: 2.8 }, { kind: "card", at: 5.3 }]}
again={[12.9, 14.5]} sticker={{ text: "¿otra vez?", at: 13 }} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/rebuild-screensLoading preview…
Catalogue sheet of interface pieces that unfolds a second row of design-token glyphs.
Render inside a Remotion composition or Player. Timing values are in seconds.
<Catalog w={936} at={3.2} title="catálogo"
items={[{ kind: "button", label: "botón", at: 7.4 }]}
tokens={[{ kind: "color", label: "color", at: 18.2 }]} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/catalogLoading preview…
One source card fanning out to a row of screens; bug, fix and recolour cues travel down the lines.
Render inside a Remotion composition or Player. Timing values are in seconds.
<Propagate w={936} h={1040} at={0.9} targets={6}
label={{ text: "una sola fuente de verdad", at: 4 }}
bug={5.8} fix={6.6} fixed={7.7} recolor={10.5} recolored={11.7} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/propagateLoading preview…
Pile of library cards on their own cues, plus Twice: a button, the same button again, a cross through the second.
Render inside a Remotion composition or Player. Timing values are in seconds.
<Shelf w={936} items={[{ text: "shadcn/ui", at: 3.4 }, { text: "jbm-ui", at: 7.7, tone: "accent" }]} />
<Twice w={936} at={13.1} second={14.6} strike={14.8} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/shelfA controlled character sweep from muted text through vermilion into ink. Drive progress with a slider, scroll, or a video timeline.
import { TextFill } from "@/jbm/ui/text-fill";
<TextFill text="Una idea toma forma." progress={0.5} />
// progress: 0–1. Set reducedMotion to show the complete text.
// Customize dimColor, accentColor, textColor, and style.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/text-fillScroll here ↓ · Focus and use ↓ / ↑ to rewind
Scroll to bring text into focus, one character at a time. Keyboard scrolling, reversible progress, and reduced-motion support.
import { ScrollTextFill } from "@/jbm/ui/scroll-text-fill";
<ScrollTextFill
text="Una idea toma forma. Letra por letra."
height={320}
distance={640}
style={{ fontSize: 40 }}
/>
// Self-contained scroll region; respects prefers-reduced-motion.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/scroll-text-fillHover a letter · Click, tap, or press Enter to flip all
Letters tumble on hover with a vermilion accent. Click, tap, or use the keyboard to flip the whole phrase. Respects reduced motion.
import { FlipText } from "@/jbm/ui/flip-text";
<FlipText duration={450} style={{ fontSize: 48 }}>Una idea viva.</FlipText>
// Hover individual letters. Click, tap, Enter, or Space flips all.
// A button: do not nest inside another button or link.
// Respects prefers-reduced-motion; reducedMotion can override it.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/flip-textOur Card, with its own border, spacing, and layered shadow.
A custom layout, a chart, an image, or a group of components.
Stack any React content as you scroll. Successive items scale into place while earlier ones fade. Page or contained scrolling, keyboard access, and a plain-list fallback.
import { ScrollStack } from "@/jbm/ui/scroll-stack";
import { Card } from "@/jbm/ui/card"; // install @jbm/card separately
<ScrollStack height={480} distance={120}>
<Card>First idea</Card>
<Card dark>Another idea</Card>
<YourComponent />
</ScrollStack>
// Each direct child is one item; group related content in a div.
// Omit height for page scrolling; avoid overflow ancestors in page mode.
// top: sticky inset; minScale: outgoing scale (0.5–1).
// reducedMotion: true renders a plain list; defaults to system preference.
// Oversized content automatically uses the list so it stays readable.
// Keep child backgrounds opaque for a solid stack.Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/scroll-stackPosition and rotate the independent Hand illustration with controlled coordinates.
<svg viewBox="0 0 500 340">
<Mano at={{x:160,y:30}} pose="point" angle={12} />
</svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/manoControlled grapheme reveal, ink lift, dotted underline, and strike-through.
import { PaperLine } from "./jbm/ui/paper-line"
<PaperLine text="Una idea clara." reveal={0.7} lift={0} strike={0} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/paper-lineContinuous folder transport with shared tab contact geometry.
import { FolderCarry, folderGrip, tableFolderGeometry } from "./jbm/ui/folder-carry"
const from = tableFolderGeometry({ x: 0, y: 80 }, 100)
const to = tableFolderGeometry({ x: 200, y: 80 }, 180)
const path = [folderGrip(from), { x: 180, y: 40 }, folderGrip(to)]
<svg viewBox="0 0 440 300"><FolderCarry from={from} to={to} path={path} progress={0.5} label="proyecto" /></svg>Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/folder-carry#FFF6E8#FFFCF5#20241F#65675F#D5D1C6#C63D24#A04D31#FF8A6A#20241F#9BE59BCream/vermilion palette, Geist stacks, radii, shadow, stage safe areas; CSS vars string for Tailwind consumers.
import { color, font, stage } from "@/lib/tokens";
<div style={{ color: color.ink, fontFamily: font.sans }} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/tokensToggle layers to inspect the current recipe. Copy uses the complete recipe.
Fine borders, inset edge lighting, and layered shadows. Compare the original surface and inspect each layer.
import { shadow, surfaceBorder } from "@/lib/tokens";
// Light surface (use cardDark for dark surfaces)
<div style={{
boxShadow: shadow.card,
border: surfaceBorder.card,
}} />Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/tokensLoading preview…
useSec, useIn, useFade, useProgress for Remotion.
Render inside a Remotion composition or Player. Timing values are in seconds.
const seconds = useSec();
const entrance = useIn(0.2);
const opacity = useFade(0.2);
const progress = useProgress(0.2, 100, 1.5);Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/motion-hooksShared points, bounds, arc-length path interpolation and travel tilt.
import { pointOn, pathTilt } from "./jbm/lib/geometry"
const path = [{ x: 40, y: 170 }, { x: 220, y: 50 }, { x: 460, y: 130 }]
const at = pointOn(path, 0.5)
const angle = pathTilt(path, 0.5)Merge this namespace into your project’s components.json, replacing YOUR_GALLERY_URL with this site’s origin.
{ "registries": { "@jbm": "https://YOUR_GALLERY_URL/r/{name}.json" } }pnpm dlx shadcn@latest add @jbm/scene-geometry