VisualProduct

Upgrade glyph

Dot animation that transitions between a gift and a rocket. Uses a static gift with reduced motion.

$ npx context-ds add upgrade-glyph

In the product

Usage

Use it for

The upgrade or plan card.

Avoid

Using it for anything but upgrades

Dependencies: dot-engine, glyph-engine

Example

examples/upgrade-glyph.tsx

import { Card, CardDescription, CardTitle } from "@/components/ui/card";import { UpgradeGlyph } from "@/components/visuals/glyph/upgrade-glyph";export function Product() {  return (    <Card className="mx-auto w-full max-w-xs items-start">      <UpgradeGlyph className="w-24 text-brand" />      <CardTitle>Upgrade plan</CardTitle>      <CardDescription>More credits and higher rate limits.</CardDescription>    </Card>  );}

Source

components/visuals/glyph/upgrade-glyph.tsx

"use client";import { DotStory, type LoadDotStory } from "@/components/visuals/dot-engine/dot-story";import { cellStates } from "@/components/visuals/dot-engine/dot-story-cells";import { GLYPH_GRID } from "@/components/visuals/glyph/glyph-art";import { GIFT_CELLS } from "@/components/visuals/glyph/upgrade-story-art";import { FINE_GRID, fineCellsOf } from "@/components/visuals/glyph/upgrade-story-fine";const RESTING = { cells: fineCellsOf(cellStates(GLYPH_GRID, GIFT_CELLS)) };const load: LoadDotStory = async (stage) => {  const { createUpgradeStoryPlayer } = await import("@/components/visuals/glyph/upgrade-story-player");  return createUpgradeStoryPlayer(stage);};/** The upgrade card's picture: a gift that takes off as a rocket, on a loop while on screen. Reduced motion keeps the gift. */export function UpgradeGlyph({ className }: { className?: string }) {  return <DotStory grid={FINE_GRID} resting={RESTING} load={load} className={className} />;}

Reference: context-dashboard c0ddf7a src/components/dots/upgrade-glyph.tsx.