CodedVisuals is a library of visual compositions: animated, self-contained illustrations built directly in code for React marketing 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. You install compositions with the shadcn CLI from a private registry or copy the source directly, and CodedVisuals ships with AI-agent skills that build whole feature sections for you from a plain-English description.

This is my first new product in about 6 years. I have spent 15 years building and supporting UI templates and components, with more than 20,000 sales, and keeping those products updated for years is what kept me heads-down. The whole time, I kept running into the same gap on my own marketing pages: the layout was fine, the copy was fine, but the page looked empty and amateur until the visuals were right. And good visuals were always the slowest, hardest part. So I built the thing I wanted: a visual layer you compose from coded building blocks instead of designing from scratch.

The problem with marketing visuals today

There are three common ways to add visuals to a landing page, and each one has a real cost:

Static illustration packs. They are flat, they look identical across thousands of sites, they do not animate, and recoloring them to your brand is tedious.
AI image and UI generation. It can rough one out, but the polish is the expensive part: tuned timing, easing, staggered reveals, and the small details that make motion feel deliberate. Recreating that still needs a designer's eye, so you keep paying to rediscover it.
Designing from scratch or hiring. This produces the best result and costs the most time and money, which most indie makers and small teams do not have.

CodedVisuals is a fourth option: production-grade compositions that behave like UI elements, because they are UI elements.

What a visual composition is

Each composition is real markup and styles, not an exported asset, so it stays crisp at any size and adapts to light and dark mode automatically. It lives in one file with no shared dependencies, reads your shadcn/ui tokens for brand color, animates with Motion, and is driven by typed props for copy, icons, logos, and values.

The library covers the parts of a marketing page you reach for most:

Charts and metrics that animate in
Browser and device mockups for product shots
Avatars and social proof for "teams use this" sections
Code editors, terminals for developer tools
Connection and integration diagrams, notifications, chat, calendars, and more

Built for the AI era: skills that build the section for you

CodedVisuals ships with a complete skill package for AI coding agents. Instead of browsing the gallery yourself, you can describe the feature section you need in plain English, and your agent assembles the whole thing: the right composition selected, dropped into a section, and themed to your brand with your tokens. You describe it, it assembles it, and you get real, editable source rather than a black box.

This matters because of how building has changed. We are all shipping faster than ever with AI, which means software increasingly looks the same and the bar for generic is low. Attention to detail is what makes a product stand out now, more than it ever has. CodedVisuals is built for exactly this moment: a next-generation product designed for the AI era, where the craft is already in the building blocks and your agent does the assembly.

A growing library, not a frozen pack

CodedVisuals is expanded with regular updates that add new compositions over time. That matters, because pixelcave has a long record of supporting products for years rather than abandoning them. Some of my products have been maintained continuously since 2013. When you buy CodedVisuals, you are buying into a library that keeps growing.

Built for modern React stacks

CodedVisuals targets the stack a large part of the indie and SaaS world already ships on:

React + TypeScript for the component model
Tailwind CSS v4 for styling
Motion for entrance animations and micro-interactions
shadcn/ui tokens for theming and dark mode

Because the compositions use shadcn semantic tokens, they inherit your theme and dark mode automatically. If you do not use shadcn/ui, a short setup guide is included so the compositions still work in a plain React, TypeScript, Tailwind v4, and Motion project.

Yours to own and reshape

Like shadcn/ui, you copy the source of a composition into your project instead of installing a black box. Props cover the common cases, but you can go much further: resize it, retime or replace the animation, restructure the layout, or rewrite the content until it matches your brand exactly. The defaults are a starting point, not a ceiling.

How it is different from illustration packs and AI

Approach	The catch	CodedVisuals
Static illustration packs	Flat, identical everywhere, not animated, hard to rebrand	Live compositions: themeable, animated, responsive
AI generation	Roughs it out, but the polish and timing are the expensive part	Crafted and production-grade, with the motion already tuned
Design from scratch or hire	Slow and expensive	Copy a composition in, customize, ship in minutes

Who it is for

CodedVisuals is for indie makers, founders, product designers, and frontend and design engineers who are building SaaS marketing pages and want polished, on-brand visuals without designing them by hand. If you have ever shipped a landing page that felt empty in the spots where a real product visual should go, this is built for you.

Pricing

CodedVisuals has two one-time licenses. Solo is for one developer and covers unlimited projects: $99, or $69 for the first 150 customers as a founding price. There is no countdown timer; when the 150 founding spots are taken, the Solo price returns to $99. Team licenses CodedVisuals for your whole team or company for $299.

Try 3 compositions free

You should feel the quality before you buy. Three compositions are free to copy and use, no strings attached. Grab the free compositions.

👉 Get CodedVisuals

FAQ

What is CodedVisuals? CodedVisuals is a library of visual compositions: animated, self-contained illustrations built as code for React marketing pages and landing pages, such as charts, mockups, social proof, bento sections, code blocks, and connection diagrams.

What is a visual composition? A visual composition is a marketing illustration built as a single React component instead of an exported image. It reads your design tokens, animates with Motion, and is customized through typed props or by editing the source directly.

What tech stack does CodedVisuals use? React, TypeScript, Tailwind CSS v4, Motion for animation, and shadcn/ui tokens for theming and dark mode.

How do I install a composition? Two ways. Sign in with your license and install it with the shadcn CLI from your private registry, or copy the source straight from the gallery. Either way the code is yours to edit. You can also have your AI agent build a full section for you using the included skills.

Does CodedVisuals work with AI coding agents? Yes. CodedVisuals ships with a complete set of skills for AI coding agents. You describe the feature section you need in plain English, and your agent assembles it with the right visual composition, themed to your brand, returning editable source. It is designed for an AI-first workflow.

Do I need shadcn/ui to use it? No. The compositions use shadcn tokens by default, but a setup guide is included so they work in a plain React, TypeScript, Tailwind v4, and Motion project without shadcn/ui.

How is it different from an illustration pack? Illustration packs are static images that look the same on every site and cannot be themed or animated easily. CodedVisuals are live compositions you theme to your brand, animate with Motion, and own as source in your codebase.

Can I just generate these with AI? AI can rough out a visual, but the polish is the expensive part: tuned timing, easing, and staggered reveals. CodedVisuals ship with that craft already in, so you copy a finished, production-grade result instead of paying to rediscover it.

Does CodedVisuals get updates? Yes, and updates are included for life. It is a growing library expanded with regular updates that add new compositions. pixelcave has supported its products for over 15 years, with some maintained since 2013.

How much does CodedVisuals cost? The Solo license (one developer, unlimited projects) is $99, with a founding price of $69 for the first 150 customers; after 150 it is $99. The Team license, for a whole team or company, is $299.

Who makes CodedVisuals? It is made by John, the indie maker behind the pixelcave brand, who has built and supported UI templates and components for more than 15 years, with over 20,000 sales, including Tailkit.

Visual Compositions as Code: Introducing CodedVisuals for React and shadcn/ui

Unlock 15+ exclusive templates