Workflows that ship
Pick a hero from a library, then make it yours
Choosing is faster and better than describing. Start from a piece that already works on phones.
2 min read · prompt included
Writing a shader or a 3D scene from a sentence is slow and rarely good. Choosing one that exists is fast, and then you can spend your time on the words.
- Open the backgrounds, filter by what your site is for, and hover the candidates.
- Pick the look that matches the feeling, then change its colours to your brand with the colour picker.
- Copy the AI prompt (it includes the colours as they appear on screen) or the code, and paste it into your project.
- Put the headline and one action over the calm part of the frame. Keep the contrast.
- One animated background per page. Let reduced motion show the still frame.
Prompt · Add a Motion background
Add a VibeBox Motion background to the hero of [site]. Install the component with the shadcn command from motion.vibeboxph.com, use the [look] look with my brand colour [hex] as the main colour, and place the headline and one call to action over the calmer left third. Keep text at WCAG AA contrast (add a scrim if needed), one animated background per page, and let prefers-reduced-motion show the still.