fragms

Beautiful components, ready made

Components and agent skills for AI interfaces. Tune them here, copy one file, done.

Open the Studio

Every fragment takes the same three steps, and none of them takes long.

1

Tune it

Every fragment has live settings. Play until it looks right.

$

2

Install it

One command saves the file. No setup, works in any React project.

3

Use it

Import it and drop it in. The snippet already has your settings.

A glow on the inside edge of a shape, moving with a voice. Wrap an element, use it bare, or lay it over the whole screen.

Demo voice

NeedsReact

Source
curl --create-dirs -o src/components/aura.tsx https://simonveprek.cz/source/aura

Saves src/components/aura.tsx. No setup, works in any React project.

Little agents with a face. Give one a shape, a colour and a mood, and it listens, thinks, talks and naps like it means it. Poke one.

Simmy

Shape

Colour

Mood

Energy1.00

NeedsReact

Source
curl --create-dirs -o src/components/points.tsx https://simonveprek.cz/source/points

Saves src/components/points.tsx. No setup, works in any React project.

An AI cursor that works your interface for real. It glides, looks, clicks and types, and your app answers the way it would for a person.

Invoices

  • NNorthwindDue May 2€2,400
  • GGlobexDue May 9€860paid
  • IInitechDue May 14€1,250
  • UUmbrellaDue June 1€3,100open

Agent

Tag

Highlight

Speed1.00

NeedsReactFramer Motion

Source
npm install framer-motion && curl --create-dirs -o src/components/ghost.tsx https://simonveprek.cz/source/ghost

Saves src/components/ghost.tsx after installing what it needs. No setup, works in any React project.

The prompt box every AI app needs. It grows as you write, takes files by drop or paste, picks a model, listens when you speak, and turns send into stop while the answer comes in.

Can you help me name my new app?

Of course. What does it do, and who is it for?

Colour

Files

Voice

Model picker

Context ring

NeedsReactFramer MotionAura

Source
npm install framer-motion && curl --create-dirs -o src/components/composer.tsx https://simonveprek.cz/source/composer -o src/components/aura.tsx https://simonveprek.cz/source/aura

Saves src/components/composer.tsx and aura.tsx beside it after installing what it needs. No setup, works in any React project.

A small ring that fills as a conversation uses up the model's memory. Point at it to see what takes the room and what each reply costs. It warns before the model starts to forget.

Ask anything84k of 200k42%Instructions2.4kFiles31kTools11kMessages39kFree116kEach reply reads it all$0.25
Used, 84k42

Model window

Price

Warns at0.80

Breakdown

Ring

NeedsReact

Source
curl --create-dirs -o src/components/context.tsx https://simonveprek.cz/source/context

Saves src/components/context.tsx. No setup, works in any React project.

Instructions your coding agent learns once and uses whenever they fit. One command installs a skill.

Jasno

A skill for clear copy

Rewrites the copy on your site so it is short, clear and free of filler, and strips out the clutter around it. Ask your agent to tighten a page and it reaches for Jasno on its own.

Claude CodeCodexCursor, Copilot and Gemini CLI
Source on GitHub
Before

We leverage cutting edge AI powered tools and solutions that empower and help your team to unlock its full potential and ship faster.

jasno clean

Every setting for every component, your own colours, presets you can save and share, and the exact code to paste. Pro opens with a code for now.

Open the StudioTry it free, unlock the rest