> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Split Tilt Cards > Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults. # Split Tilt Cards Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults. **Split Tilt Cards** ```html split-tilt-cards.html theme={null} Split Tilt Cards ``` Copy npx hyperframes add split-tilt-cards to the clipboard That writes one file: `compositions/components/split-tilt-cards.html`. ## Paste it into your composition Open `compositions/components/split-tilt-cards.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `label_a` | `Before` | string | Mono header on the left card. Blank hides it. | | `label_b` | `After` | string | Mono header on the right card. Blank hides it. | | `badge_a` | `v1` | string | Pill badge that spring-pops at the left card inner edge. Blank disables it. | | `badge_b` | `v2` | string | Pill badge that spring-pops at the right card inner edge. Blank disables it. | | `accent` | `green` | `green`, `blue`, `violet` | Right-card tint, right badge, and right ambient glow color. | | `exit` | `none` | `none`, `fade`, `up` | Outgoing transition. None holds the final spread. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap theme={null}
``` Tagged `motion-primitive` `layout` `compare` `holdable` `book-open` `tilt` `slots`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md) ## Related topics - [Tilt Card](/catalog/components/tilt-card.md) - [Add captions to a video with AI](/guides/captions-and-recuts.md) - [Make motion graphics with AI](/guides/motion-graphics.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.