design-infraGitHub

Component catalog

Find components by type and feeling. Explore live examples, shortlist your options, and copy your picks to your agent.

Looking for: Editorial. Use filters to narrow the results.

Show
Filter by feeling, motion, usage or library
Feel
Motion
Use as
Source

75 total results · 39 with visual previews · 36 on source sites

  • Editorial (design system) preview
    Editorial (design system)

    Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/editorial/DESIGN.md first.

    ocEditorialWarmCalmSource
  • Typewriter Effect previewenter — medium
    Typewriter Effect

    Text generates as if it is being typed on the screen.

    aceternityEditorialPremiumFuturisticSource
  • Afterburner · Anatomy previewloop · state — medium
    Afterburner · Anatomy

    Import Afterburner from "anatomy-figures/afterburner" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • B-tree index · Anatomy previewloop · state — medium
    B-tree index · Anatomy

    Import BTree from "anatomy-figures/b-tree" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Binary search · Anatomy previewloop · state — medium
    Binary search · Anatomy

    Import BinarySearch from "anatomy-figures/binary-search" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Bloom filter · Anatomy previewloop · state — medium
    Bloom filter · Anatomy

    Import BloomFilter from "anatomy-figures/bloom-filter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Desk computer · Anatomy previewloop · state — medium
    Desk computer · Anatomy

    Import Computer from "anatomy-figures/computer" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • DNS resolution · Anatomy previewloop · state — medium
    DNS resolution · Anatomy

    Import Dns from "anatomy-figures/dns" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Easing bench · Anatomy previewloop · state — medium
    Easing bench · Anatomy

    Import Easing from "anatomy-figures/easing" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • flex-grow · Anatomy previewloop · state — medium
    flex-grow · Anatomy

    Import FlexGrow from "anatomy-figures/flex-grow" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Forge and hammer · Anatomy previewloop · state — medium
    Forge and hammer · Anatomy

    Import Forge from "anatomy-figures/forge" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Foundry pour · Anatomy previewloop · state — medium
    Foundry pour · Anatomy

    Import Foundry from "anatomy-figures/foundry" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Branch and merge · Anatomy previewloop · state — medium
    Branch and merge · Anatomy

    Import GitMerge from "anatomy-figures/git-merge" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Glory hole · Anatomy previewloop · state — medium
    Glory hole · Anatomy

    Import GlassFurnace from "anatomy-figures/glass-furnace" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Gradient descent · Anatomy previewloop · state — medium
    Gradient descent · Anatomy

    Import GradientDescent from "anatomy-figures/gradient-descent" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Mark and sweep · Anatomy previewloop · state — medium
    Mark and sweep · Anatomy

    Import MarkSweep from "anatomy-figures/mark-sweep" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Merge sort · Anatomy previewloop · state — medium
    Merge sort · Anatomy

    Import MergeSort from "anatomy-figures/merge-sort" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Mutex · Anatomy previewloop · state — medium
    Mutex · Anatomy

    Import Mutex from "anatomy-figures/mutex" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Plasma cutter · Anatomy previewloop · state — medium
    Plasma cutter · Anatomy

    Import PlasmaCutter from "anatomy-figures/plasma-cutter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Power station · Anatomy previewloop · state — medium
    Power station · Anatomy

    Import PowerStation from "anatomy-figures/power-station" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialTrustworthySource
  • Process pump · Anatomy previewloop · state — medium
    Process pump · Anatomy

    Import ProcessPump from "anatomy-figures/process-pump" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Two-key box · Anatomy previewloop · state — medium
    Two-key box · Anatomy

    Import PublicKey from "anatomy-figures/public-key" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Pool reactor · Anatomy previewloop · state — medium
    Pool reactor · Anatomy

    Import Reactor from "anatomy-figures/reactor" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Temperature · Anatomy previewloop · state — medium
    Temperature · Anatomy

    Import Sampling from "anatomy-figures/sampling" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Seasons · Anatomy previewloop · state — medium
    Seasons · Anatomy

    Import Seasons from "anatomy-figures/seasons" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • TCP handshake · Anatomy previewloop · state — medium
    TCP handshake · Anatomy

    Import TcpHandshake from "anatomy-figures/tcp-handshake" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyEditorialMinimalTechnicalSource
  • Tokamak shot · Anatomy previewloop · state — medium
    Tokamak shot · Anatomy

    Import Tokamak from "anatomy-figures/tokamak" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Turbofan ground run · Anatomy previewloop · state — medium
    Turbofan ground run · Anatomy

    Import Turbofan from "anatomy-figures/turbofan" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

    anatomyExperimentalEditorialMinimalSource
  • Typewriter previewenter — subtle
    Typewriter

    Typewriter effect component with customizable typing speed and cursor animation

    cult-uiEditorialPlayfulRefinedSource
  • Floating 3D Particles previewloop — expressive
    Floating 3D Particles

    A canvas-based pseudo-3D particle field with perspective projection, continuous rotation and buoyant drift.

    magicuiEditorialRefinedPlayfulSource
  • Particles previewloop · cursor — expressive
    Particles

    Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.

    magicuiEditorialRefinedPlayfulSource
  • Banner: newsletter, subscribe preview
    Banner: newsletter, subscribe

    Banner variant (comp-311) — banner, newsletter, subscribe.

    originuiEditorialMinimalTrustworthySource
  • Dialog: modal, newsletter, subscribe preview
    Dialog: modal, newsletter, subscribe

    Dialog variant (comp-321) — dialog, modal, newsletter, subscribe, form, radix.

    originuiTechnicalEditorialTrustworthySource
  • Antigravity previewloop · cursor — expressive
    Antigravity

    3D antigravity particle field that repels from the cursor with smooth motion.

    react-bitsExperimentalEditorialPlayfulSource
  • Click Spark previewpress · loop — expressive
    Click Spark

    Creates particle spark bursts at click position.

    react-bitsTechnicalEditorialExperimentalSource
  • Particle Text previewloop — expressive
    Particle Text

    Text assembles from drifting particles that scatter and reform on demand.

    react-bitsEditorialTrustworthyExperimentalSource
  • Particles previewloop · cursor — expressive
    Particles

    Configurable particle system.

    react-bitsEditorialExperimentalPlayfulSource
  • Pixel Blast previewloop · cursor — expressive
    Pixel Blast

    Exploding pixel particle bursts with optional liquid postprocessing.

    react-bitsRetroExperimentalEditorialSource
  • Swarm Cursor previewcursor · loop — expressive
    Swarm Cursor

    Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest.

    react-bitsFuturisticEditorialExperimentalSource

More examples on source sites

These entries have no hosted visual preview. Open the vendor demo to explore them; access requirements still apply.