Paste and go: turn code into components

Why paste code

Plenty of good-looking cards, subtitle styles, and animated icons already exist as code: an HTML snippet, an SVG icon, a Lottie animation JSON, a React component. The old workflow screenshots or screen-records them and drops that into an editor, losing both quality and editability. Orbit turns the code itself into a clip you can edit.

The four content types

What you paste	What Orbit detects	What you can change
Web code (HTML / CSS / JS)	Web component	Color, font, size, border, corner radius, opacity, width and height, blur
SVG icon	Vector component	Color, width and height, opacity
Lottie JSON	Lottie native runtime	Frame size and duration are filled in automatically; color is editable
React component code	React component	The parameters exposed in Properties

Anything Orbit can't read is rejected on the spot, with the reason shown in the dialog, instead of a card full of garbled text.

Steps

1. Click Paste in the Library, or paste the contents of your clipboard straight into the dialog.
2. The detection result appears within 0.3 seconds: type, frame size, default duration.
3. Confirm and save it to My components. It shows up in the Library and can be dragged straight onto the timeline.

A few details

• Lengths are always in pixels: `%` and `vw` in the original code are converted to pixels against the component canvas of 1920×1080, so it renders the same on every machine.
• Centered content: component content is centered on the design canvas by default, so you can adjust it right away.
• Full-page backgrounds ask first: if Orbit detects a full-page background, it asks whether to clear it when you add the clip, so it doesn't cover the picture below.
• Review and publishing: components submitted to the public Library are reviewed on the backend. Reviewers may fine-tune properties, and approved components are marked as such on the card.

Next

Pasted components usually need color and size tweaks. Head to Keyframes, transitions, and subtitles.