Mondrian Split — component for transitions (remotion)
For AI agents: find the right skill in one call —
curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the use-case page.
Black lines cut the frame into a seeded De Stijl grid, primaries wipe into its cells, the grid reflows like rubber, and one cell pushes its own lines out past the edges to become a clean color field or the next scene.
- Install:
npx shadcn@latest add @remocn/mondrian-split - Registry: remocn · Framework: remotion · License: MIT
- Docs and preview: https://remocn.dev/docs/motion-graphics/mondrian-split
- Source: https://remocn.dev/r/mondrian-split.json
- Runs: local render, free
- Aspect: any
Slots (what you fill in)
seed(number)splits(number)lineWeight(number)expandCell(number)lineColor(color)redColor(color)yellowColor(color)blueColor(color)fieldColor(color)
Used in
- Beat-synced slideshow
- Music video
- Kinetic manifesto
- News broadcast package
- Photo memories
- Game trailer
More transitions
- Chromatic Aberration Wipe —
npx hyperframes add chromatic-aberration-wipe - Colorama Wipe —
npx hyperframes add colorama-wipe - Cross Warp Morph —
npx hyperframes add cross-warp-morph - Cut the Curve —
npx hyperframes add cut-the-curve - Directional Wipe —
npx hyperframes add directional-wipe - Domain Warp Dissolve —
npx hyperframes add domain-warp-dissolve