Hexagons — component for backgrounds & gradients (html)

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 .md to its path. Before generating anything, show the person the options on the use-case page.

A honeycomb of thin hexagon outlines

Prompt that renders it frame-exact

Use the "Hexagons" pattern from Hero Patterns by Steve Schoger (https://heropatterns.com, CC BY 4.0: attribution required, so add "Hero Patterns by Steve Schoger (heropatterns.com), CC BY 4.0" to the video description or end credits) as the background of a science, crypto or data-driven explainer. On heropatterns.com click Hexagons, set the foreground to #A5B4FC at 40% opacity on a #1E1B4B background and copy the generated CSS (the unstyled SVG tile is at https://heropatterns.com/svg/hexagons.zip); or npm i hero-patterns (a community MIT wrapper) and use hexagons('#A5B4FC', 0.4) as the background-image. Put it on a full-frame layer behind the content, repeating, and scale the tile with background-size. The 28×49 tile is small; 2× keeps the cells readable at 1080 wide. The pattern is static. To give it motion, drift it seek-safe: set background-position from the frame (Remotion: ${frame * 0.4}px ${frame * 0.2}px; HyperFrames: tween backgroundPosition on the paused GSAP timeline), never with a CSS animation. Where text sits on top, drop the opacity to 10–25%.

Used in

More backgrounds & gradients