Is Grepped free to use?

Yes. The Free plan gives you 2 projects and 3 generations per week with no credit card required. Paid plans unlock more generations, React output, and Expert Mode.

What code does Grepped output?

All plans output clean, single-file HTML + CSS. Pro and Studio plans also output React components. The code has no external dependencies — you can paste it straight into any project.

Expert Mode uses a more capable AI model for complex, multi-step animations and interactions. It is available on Pro (3/month) and Studio (10/month) plans.

Can I use the generated code commercially?

Yes. All paid plans include commercial use rights. Free plan output is for personal and non-commercial use only.

How do I save my animations?

Animations are saved as projects in your account. Free accounts can store 2 projects. Starter gets 10, Pro and Studio have unlimited projects.

Does Grepped support React output?

React output is available on Pro and Studio plans. The generated component is self-contained with inline styles or Tailwind classes depending on the animation.

Documentation

Everything you need to know about generating, customising, and exporting AI UI animations with Grepped.

Overview

Grepped is an AI-powered UI component generator. You describe what you want in plain English, and the AI writes production-ready HTML/CSS (or React) from scratch — not pulled from a pre-built library.

Every animation is unique. The model synthesises code specifically for your prompt, so you get exactly what you described rather than the nearest match in a template catalogue.

Getting Started

01
Create a free account
Sign up with email, Google, or GitHub. No credit card required. You get 3 generations per week on the Free plan immediately.
02
Open the workspace
Go to grepped.dev and click any preset to open the workspace, or start from a blank prompt.
03
Write your first prompt
Describe the animation in the chat panel. Be specific: include the element type, trigger, motion style, and timing feel. Example: "a card that lifts with a subtle shadow on hover, 250ms ease-out".
04
Review the preview
The centre panel shows a live preview of your animation. Interact with it to confirm the behaviour matches your intent.

Using the Workspace

The workspace is a three-panel layout. Each panel has a specific role:

Left — Agent panel

Type prompts and edit messages here. After generation, you can send follow-up messages to refine the result: "make it faster", "change the colour to blue", "add a bounce at the end".

Centre — Preview

Live iframe showing the generated animation. Toggle the background between light and dark to check contrast. The preview updates in real time when you adjust controls.

Right — Controls / Code

Switch between the Controls tab (sliders and colour pickers for the key parameters) and the Code tab (the full HTML/CSS or React source). Changes in Controls update the preview immediately without re-generating.

Exporting Code

Click the Code tab in the right panel to view the full source. Use the copy button to copy it to your clipboard.

HTML + CSS output

Available on all plans. A self-contained file with no external dependencies. Strip the demo wrapper and paste the element and its <style> block into your project.

React output

Available on Pro and Studio plans. A functional component using inline styles or Tailwind classes. Works with Next.js, Vite, Create React App, and any React 16+ project.

Best practices for pasting code

Scope class names to avoid collisions in shared style sheets.
Add prefers-reduced-motion guards to keyframe animations.
Remove the demo wrapper markup — copy only the target element and its styles.

Plans & Limits

Plan	Generations	Edits	Projects	React output
Free	3 / week	5 / week	2	—
Starter	15 / month	40 / month	10	—
Pro	50 / month	100 / month	Unlimited	✓
Studio	800 / month	2,000 / month	Unlimited	✓

See the full pricing page for a complete feature comparison.

FAQ

Is Grepped free to use?: Yes. The Free plan gives you 2 projects and 3 generations per week with no credit card required. Paid plans unlock more generations, React output, and Expert Mode.
What code does Grepped output?: All plans output clean, single-file HTML + CSS. Pro and Studio plans also output React components. The code has no external dependencies — you can paste it straight into any project.
What is Expert Mode?: Expert Mode uses a more capable AI model for complex, multi-step animations and interactions. It is available on Pro (3/month) and Studio (10/month) plans.
Can I use the generated code commercially?: Yes. All paid plans include commercial use rights. Free plan output is for personal and non-commercial use only.
How do I save my animations?: Animations are saved as projects in your account. Free accounts can store 2 projects. Starter gets 10, Pro and Studio have unlimited projects.
Does Grepped support React output?: React output is available on Pro and Studio plans. The generated component is self-contained with inline styles or Tailwind classes depending on the animation.