Free · written walkthroughs with prompts
Learn to ship cinematic pages with an agent
Short lessons from a blank page to a finished section. Follow the steps yourself or paste the prompt into your coding agent.
Featured build
A glowing hero in ten minutes
Follow the steps, then copy the prompt. This is the scene you will end up with.
- 1Run npx shadcn@latest add https://ui.tealmac.com/r/hero-scene-3d.json in your project.
- 2Wrap your headline and buttons in <HeroScene3D> so the scene sits behind them.
- 3Set variant="glass" and keep clearCenter on, so the middle stays free for text.
- 4Check it in dark mode first. The scene reads its colours from your theme.
Add a dark hero section to my Next.js app. Install tealmac UI's hero-scene-3d with: npx shadcn@latest add https://ui.tealmac.com/r/hero-scene-3d.json. Wrap my headline and two buttons in <HeroScene3D variant="glass" clearCenter>. Keep the text readable on top and follow the theme's colours.
Lessons
Beginner
- 10 minLesson 01
A glowing hero in ten minutes
A dark hero with glass shapes floating behind your headline.
Steps and prompt
- Run npx shadcn@latest add https://ui.tealmac.com/r/hero-scene-3d.json in your project.
- Wrap your headline and buttons in <HeroScene3D> so the scene sits behind them.
- Set variant="glass" and keep clearCenter on, so the middle stays free for text.
- Check it in dark mode first. The scene reads its colours from your theme.
Paste into your coding agent
- 10 minLesson 02
Put a galaxy behind your headline
A spiral of thousands of particles that turns slowly.
Steps and prompt
- Run npx shadcn@latest add https://ui.tealmac.com/r/particle-field-3d.json.
- Render <ParticleField3D variant="galaxy" count={12000} glow /> in a box that fills the section.
- Pick two colours with the colors prop, or leave it to use your theme.
- Lower count on phones if the frame rate drops.
Paste into your coding agent
- 8 minLesson 03
Connect your agent with MCP
Your coding agent can search the catalogue and install items.
Steps and prompt
- Add https://ui.tealmac.com/mcp as a remote MCP server in your client.
- Ask it to list the categories, then search for something you need.
- Let it run the install command it returns in your terminal.
- Read the MCP page if your client needs the bridge config.
Paste into your coding agent
- 12 minLesson 04
Make it yours with the theme remixer
A theme with your brand colour and radius, copied as CSS.
Steps and prompt
- Open the theme remixer and pick the closest base theme.
- Move hue, chroma and radius until the preview feels like your brand.
- Copy the CSS and paste it into your global stylesheet.
- Reload. Every installed item picks up the new tokens.
Paste into your coding agent
Lessons
Intermediate
- 20 minLesson 05
A pricing section that converts
Three tiers, one highlighted, with a clear primary action.
Steps and prompt
- Ask your agent to search the catalogue for a pricing block.
- Install it, then replace the tiers with your real plans and prices.
- Highlight one tier and keep the other buttons secondary.
- Check the tab order and the contrast of the highlighted card.
Paste into your coding agent
- 15 minLesson 06
Motion that respects reduced motion
Animation that stops for people who ask for less movement.
Steps and prompt
- Turn on Reduce motion in your operating system.
- Reload your page. Loops should stop and leave a still frame.
- Anything that still moves needs a prefers-reduced-motion rule.
- Read the motion guide for the pattern the catalogue uses.
Paste into your coding agent
- 15 minLesson 07
Dark mode, done properly
A page that looks designed in both themes, not inverted.
Steps and prompt
- Use the class strategy so the theme toggles by a class on the root.
- Check every surface, border and shadow in both themes.
- Test images and scenes on both backgrounds.
- Follow the dark mode guide for the toggle and the stored choice.
Paste into your coding agent
Lessons
Advanced
- 25 minLesson 08
Keep WebGL fast
Scenes that load late and never fight for the GPU.
Steps and prompt
- Mount a scene only while it is on screen.
- Cap how many run at once; browsers drop contexts past about sixteen.
- Show a still backdrop while a scene loads or when WebGL is missing.
- Lower particle counts and pixel ratio on small screens.
Paste into your coding agent
- 30 minLesson 09
Ship it: checks before launch
A short list you run before every release.
Steps and prompt
- Run your type check and your build.
- Tab through the whole page without a mouse.
- Check mobile width, light and dark, and reduced motion.
- Open the quality page and compare against the rules the items follow.
Paste into your coding agent
After the lessons
Where to go next
- The WebGL section gallery: 252 sections to start from.
- Theming guide: the variables every item reads.
- /llms.txt: the whole catalogue as plain text for agents.