Use case
Give your website its own visual language.
Make logos, feature illustrations and short animations that fit the page you're building. Start with a placement and a message, then refine the asset in conversation.
A website loop that explains the connection
Made with RubiicClaude Code and Codex connect through MCP to Rubiic, which sends a video, poster and GIF back to an app. The headline reads: Your coding assistant. Now creative. The animation uses an earlier Rubiic logo direction.
Give the asset a job on the page
A hero animation can show how a product works. A small diagram can make a feature understandable. A logo or loading loop can give a new app a recognizable starting point. Rubiic helps you develop these pieces in conversation, then revise them as the page takes shape.
The example above was made in Rubiic for a website explaining its connection to an AI assistant. A short, silent animation can sit beside the page copy without asking visitors to listen to a full presentation.
Start with the space it needs to fit
- Placement: hero, feature section, empty state, social preview or app icon.
- Size and surroundings: dimensions, page background and any crop on mobile.
- Brand references: a website, accepted palette, logo or screenshots you can use.
- One message: what the asset should help a visitor understand.
Build a still first, then add useful motion
Keep the layout and labels readable at the size they will appear on the website. For an animation, establish the composition before adding movement. A transition should explain a change, direct attention or connect two steps. Ask for a settled poster frame so the section still works before playback.
Review the result against the page background and at phone width. A narrow crop can remove the detail that makes a diagram useful. If the placement changes, ask Rubiic to adapt the composition.
Hand it to your website builder
Download a still image, render an MP4 or export a short GIF, depending on the placement. Add alternative text to meaningful images and a reduced-motion option for motion that starts automatically. Keep large videos out of the initial page download. A native SVG, Lottie file or transparent-background export is a separate handoff requirement, not something to assume from a preview.
Working with a coding assistant? The Rubiic MCP guide shows how to connect it to Rubiic. For a complete identity direction, start with brand assets.
Try a brief like this
A starting point to adapt to your product and audience. This is a suggested new brief, not the original conversation behind the example.
Create a 10-second silent website animation showing an idea moving from an AI assistant into Rubiic and becoming a finished visual. Use a 1600 × 900 canvas, large readable labels and a clean looping motion. Leave room around the composition for a responsive website crop. Export a poster frame too.
What will you make next?
Rubiic is invite-only while it scales. Join the waitlist and we will tell you when a seat opens.