Background

Orbit Of Frames

A phrase stands in the centre while photo cards travel around it on a tilted orbit: the near ones are larger and sharper, the far ones smaller, paler and blurred.

What you can change

  • eyebrow, title and note — the label, the centre phrase and the line beneath it
  • photos — the frames on the orbit: src and alt
  • count — how many frames to keep on the orbit; they repeat around the circle

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/background-005?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

The frames live in one layer and the script gives each of them depth every frame: the position on the elliptical orbit sets the scale, the opacity, the blur and the stacking order. Keeping that in CSS animation would take four parallel keyframes per card, so rAF computes the positions. A full turn takes a minute at speed = 1: the orbit has to read as movement rather than as a spinning wheel. Frame sizes and ratios alternate — identical rectangles read as a grid rather than an armful of cards. Photos come through the photos prop; without them paper blanks stay on the orbit, so the component drops into someone else's project with no assets at all. The phrase sits above the frames and does not travel with them, and the whole centre can be replaced through children. The theme comes from the surroundings through light-dark(): by day the canvas is light, by night dark, and the frame surface follows it. The background and ink props override both branches at once. The canvas stays flat, with no vignette and no halo: gradient circles give themselves away before the frames do, and the centre text is held by a glow in the canvas colour. A frame always stays fully on the canvas — when room runs short the orbit shrinks the cards instead of cutting them. The orbit stops off-screen and in a hidden tab, and prefers-reduced-motion leaves a single still frame.

Tags

  • background
  • orbit
  • carousel
  • photos
  • gallery
  • hero
  • light
  • moodboard
  • ambient
  • decorative
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…