Introduction

CodedVisuals is a library of visual compositions: animated, self-contained illustrations built directly in code for modern marketing sites and landing pages.

Instead of static illustration packs or one-off SVGs, every composition behaves like a UI element you already understand. It is a single React component, styled with your design tokens, animated with Motion, and ready to drop into bento grids, hero sections, feature blocks, and product explainers.

Why visual compositions

Marketing pages are full of the same recurring illustrations: a chart that animates in, a row of integration logos, a faux code editor, a connection diagram. Designing each one from scratch is slow, and exported graphics never match your brand or theme.

Visual compositions solve this by treating each illustration as code:

• Code-first. Every composition is real markup and styles, not an exported asset. It stays crisp at any size and adapts to light and dark mode automatically.
• Self-contained. Each composition lives in one file with no shared dependencies between compositions. Copy the file, and it just works.
• Token-colored. Brand surfaces use your shadcn/ui design tokens, so compositions inherit your primary color and dark mode with no overrides.
• Animated by default. Entrance and micro-interaction animations are powered by Motion, with mount, in-view, and replay-on-scroll triggers. Switch motion off with a single prop.
• Driven by props. Swap copy, icons, logos, and counts through typed props. Bring your own brand SVGs for a perfect fit.
• Yours to own and reshape. Like shadcn/ui, you copy the source into your project instead of installing a black box, so nothing is locked away. Props cover the common cases, but you can go much further: open the file and resize it, retime or replace the animation, restructure the layout, or rewrite the content until it matches your preferences exactly. The defaults are a starting point, not a ceiling.
• Polished beyond the prompt. An AI model can rough one out, but the polish is the expensive part: tuned timing, easing curves, staggered reveals, and the small details that make motion feel deliberate. Recreating that from scratch burns a lot of tokens and still needs a designer's eye to land. Every composition ships with that craft already in, so you copy a finished, production-grade result instead of paying to rediscover it.

What you need

Visual compositions are built on a modern, familiar stack:

• React for the component model.
• TypeScript because every composition ships as a typed .tsx file.
• Tailwind CSS v4 for styling.
• shadcn/ui tokens for theming and dark mode.
• Motion for animation.
• lucide-react for icons.

If your project already uses shadcn/ui, compositions work out of the box. Adding one with the shadcn CLI installs Motion and lucide-react for you, so there is nothing to install by hand (and most shadcn/ui projects already include them both). Head to Installation for the happy path, or Manual setup if you are not using shadcn/ui yet.

Next steps

• Installation: add CodedVisuals to a shadcn/ui project.
• Manual setup: configure a plain React and Tailwind project.
• Registry: install visuals with the shadcn CLI using your registry token.
• Usage: copy a composition and customize it with props.