pixelcave

Grow your online business faster with AI-powered, handcrafted resources · · · by @pixelcave_john

[pixelcave @pixelcave]

New project!!! 👀

[John Champ @pixelcave_john]

After about 6 years, I'm finally launching something new and I'm really excited about it.

I've been building and selling dashboard templates and component libraries for over 15 years. Some of my products have been actively maintained for over a decade. Supporting them properly kept me heads-down, so new launches took a back seat. That changes today.

The problem: you built your marketing page with AI or a custom design, but the product sections still look empty. Simple icons, abstract images, or static illustrations where you present your product are a quick way to end up generic, matching every other site. Standing out is the hard part.

Introducing CodedVisuals: animated visual compositions, in code, for your marketing websites and landing pages. Charts, browser mockups, social proof, code blocks, connection diagrams and so many more. The part of a marketing page that's hardest to get right (even with AI) and easiest to get wrong.

Each one is a single React component. Install it with the shadcn CLI or copy the source, theme it to your brand in seconds, and animate it on scroll. You own the code, so you can change anything.

It even ships with a complete and detailed skill package for your AI agent: tell it the feature sections you want, and it installs and builds the whole thing with the right visuals dropped in and themed to your brand.

A next-generation product, made for the AI era.

This is just the beginning. The library will keep growing with new visual compositions, supported for years, the way my products always have been.

It's live now, and early birds get the founding spots. Link and details in the first reply.

A repost today means more than you'd think. Thank you! 🙏

[pixelcave @pixelcave]

perfect for hero sections showcasing agents using browsers

[John Champ @pixelcave_john]

wip coming next week, wish you a nice weekend

[pixelcave @pixelcave]

nice background song!

did fable 5.2 make it as well?

[John Champ @pixelcave_john]

are you kidding me fable 5.2?

with just 1 prompt?

- 135 animated compositions
- 1240+ variations
- shadcn/ui library agentic ready
- registry and mcp server
- skills package
- totally themeable

this is it, time to retire.

[pixelcave @pixelcave]

😮

[John Champ @pixelcave_john]

Fable 5.2 cooked

[John Champ @pixelcave_john]

agent uses the Astro design system..

..and then delivers your website.

[pixelcave @pixelcave]

the latest Buildkit for Astro update is 🔥

[John Champ @pixelcave_john]

this is the product I built for the agentic era.

I created this to help me with my agency's work but I'm sure you will find it very handy as well.

a design system for building super fast and carefully crafted marketing websites with your agents.

it consists of:

→ layout system
A robust system it took me months to put together. The implementation wasn't hard, it was the decisions I had to tale on how to approach this to cater for all my needs.

→ dynamic blocks
The blueprint every single section is created from, completely customizable with props.

→ configuration core
Manages the overall functionality, layout and look of your whole project.

→ skills that teach your agents the whole system
ask your agent to build your website from a brief + assets or prepare any page you want. It picks the right blocks, reads their props, and follows the rules. You get great results every time.

→ updates that merge, never overwrite
a dream come true for me. You can now upgrade your whole project to the latest design system update with just one command to your agent.

and today it got bigger.

Buildkit 1.1.0 update is out:

→ 2 animated hero scenes from CodedVisuals are now included bringing them to 62 visuals in total.

→ 13 new core blocks: centered and split headers, services, location map, contact cards, pricing comparison, testimonial wall, and more.

→ Header overlays that slide in as you scroll.

→ Changelog and legal page boilerplates along with tons of improvements and fixes under the hood.

if you are building static websites for you or your clients and you are tired of AI generated code with no design system that you can't properly maintain and extend, then this was made for you too.

→ https://t.co/OqC1vAq7GK

let me know what you built with it 🙏

[pixelcave @pixelcave]

building beautiful websites with agents was never easier!

[John Champ @pixelcave_john]

ai slop is dead

[pixelcave @pixelcave]

your personal frontend developer ↓

[John Champ @pixelcave_john]

this is your new vibe coded CRM dashboard for your business

it was quickly put together with Opus 5.5 and Tailkit's MCP server using the new collections feature

I visually put together all my favorite components for that dashboard and asked to use that collection to build it

prompt:

"use the 'Dashboard CRM' collection I have on tailkit to build me a CRM dashboard UI for my custom vibe coded project to manage my customers

Use for primary color a nice tailwind css palette close to the default indigo and the secondary a palette close to the default zinc one"

that's it!

[pixelcave @pixelcave]

for shadcn/ui and react hero sections?

yes, coming soon🔥

[John Champ @pixelcave_john]

work in progress for the brand new animated visuals

perfect for shadcn and react hero sections

coming as a free update next week

[pixelcave @pixelcave]

no excuses.. building high quality landing pages is now easier than ever ↓

[John Champ @pixelcave_john]

vibe coded landing pages that look like someone cared?

made with opus 5.5 in a couple of minutes, using buildkit for astro and codedvisuals

[pixelcave @pixelcave]

looking good 😍

[John Champ @pixelcave_john]

your hero sections will never be the same again

things will soon start getting really serious

codedvisuals - i'm looking at you

[pixelcave @pixelcave]

🚀

[John Champ @pixelcave_john]

this shadcn and motion component library is getting huge

check it out, tons of animated visuals are already available

[pixelcave @pixelcave]

new codedvisuals update just before the weekend! 🔥

[John Champ @pixelcave_john]

just pushed new beautiful animated illustrations for your landing pages

all with fluid animations bringing the count to over 1220 visual variations

→ api/rate-limit.tsx
→ charts/block-stack.tsx
→ connections/layer-stack.tsx
→ keyboard/isometric-keys.tsx
→ tasks/sort-lanes.tsx

update your skills and let your agents pull them and use them in any shadcn/ui project

also moved forward with documentation and design improvements to the app itself

the library is getting really amazing, so keep an eye on it, i'm just getting started

[pixelcave @pixelcave]

tailkit's mcp server on steroids 💪

[John Champ @pixelcave_john]

ui design will never be the same again, this is the new era

huge update to tailkit's mcp server and as always completely free

if your client supports mcp apps, you can now visually navigate through the whole library directly from your ai chats

it comes with amazing new features out of the box:

→ brand new collections: save your favorite UI components or create custom lists for your projects (tailkit app)

→ access all collections from mcp: list or directly use your saved components to build your websites and web apps only from them

→ mcp ui app: search and find any component you like (screenshots included) and directly use them in your agents

tell me what you are building next and stay tuned for more useful integrations

[John Champ @pixelcave_john]

no more boring marketing websites built with shadcn/ui and react

with every new animated illustration, you get tons of variations to choose from..

..and with the included skills, you agents know which one to use in each case out of the box

[pixelcave @pixelcave]

if you are using react and agents, check this out

[John Champ @pixelcave_john]

this shadcn/ui library is getting bigger and better with every update

i just added 2 new animated visuals to the geo category

- geo/edge-network.tsx

A dotted world map where a request hops to the nearest edge node, with latency chips comparing the edge to a distant origin server.

- geo/geofence.tsx

A softly faded street map with a drawn zone, tracked devices driving its irregular roads, and a toast that pops each time one enters the zone.

cooking more this week

[pixelcave @pixelcave]

🔥👨‍💻👩‍💻

[John Champ @pixelcave_john]

are you vibe coding your own beehiiv platform?

opus 5.5 + tailkit's MCP server can bring your handcrafted dashboard UI to life in no time

↓ prompt

"I'm vibe coding my beehiv (newsletter platform) alternative. Use Tailkit components and build me the main dashboard of such platform by using a-l-various-03 as the main layout. Use purple for primary and zinc for secondary. Don't use contextual colors, focus on simplicity and main ones."

[pixelcave @pixelcave]

many more are coming soon!!

[John Champ @pixelcave_john]

are you using shadcn/ui?

this library is the one for any project of yours

already 122 animated visuals in and over 1150 ready made variations with many more coming soon

get ready!

[pixelcave @pixelcave]

🚀

[John Champ @pixelcave_john]

did you like the pricing toggle effect?

→ https://t.co/yAjt1hYseH

[pixelcave @pixelcave]

we are just getting started! 🚀

[John Champ @pixelcave_john]

with buildkit v1.0 I've put together 41 core dynamic blocks from which you can generate hundreds of variations

i plan to keep improving the astro design system based on real project requirements, so stay tuned, it's going to be a Swiss knife but for creating static websites

↓

[pixelcave @pixelcave]

😊🙌

[John Champ @pixelcave_john]

now available for all your shadcn/ui and react projects

↓

ai/model-picker
ai/neural-net
ai/thinking