Hive
React + Tailwind
const css = `
@keyframes loader-hive-cell {
0%, 100% { background: light-dark(#ebedf0, #232529); transform: scale(0.9); }
12% { background: light-dark(#373a40, #f1f2f3); transform: scale(1); }
40% { background: light-dark(#cbced3, #393c41); transform: scale(0.92); }
}
@keyframes loader-hive-core {
0%, 100% { background: light-dark(#6d7179, #7d8087); transform: scale(0.82); }
50% { background: light-dark(#42454c, #e5e6e9); transform: scale(0.95); }
}
.loader-hive { position: relative; width: 104px; height: 100px; }
.loader-hive__cell {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 34px;
margin: -17px 0 0 -15px;
/* Pointy-top hexagon. */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: light-dark(#ebedf0, #232529);
animation: loader-hive-cell 2.1s ease-out var(--d) infinite;
}
.loader-hive__cell--core { animation: loader-hive-core 1.05s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.loader-hive__cell { animation: none; transform: scale(0.9); }
}
`;
// Centres of the six neighbours of a pointy-top hex (width 30, row step 25.5), clockwise from the right.
const RING: [number, number][] = [
[32, 0],
[16, 27.5],
[-16, 27.5],
[-32, 0],
[-16, -27.5],
[16, -27.5],
];
export function HiveLoader() {
return (
<>
<style>
{css}
</style>
<div className="loader-hive" role="status" aria-label="Loading">
<span className="loader-hive__cell loader-hive__cell--core" aria-hidden="true" />
{RING.map(([x, y], i) => (
<span
key={i}
className="loader-hive__cell"
aria-hidden="true"
style={{ translate: `${x}px ${y}px`, '--d': `${(i * 0.35).toFixed(2)}s` } as React.CSSProperties}
/>
))}
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<div class="loader-hive" role="status" aria-label="Loading">
<span class="loader-hive__cell loader-hive__cell--core" aria-hidden="true"></span>
<span class="loader-hive__cell" aria-hidden="true" style="translate:32px 0px;--d:0.00s"></span>
<span class="loader-hive__cell" aria-hidden="true" style="translate:16px 27.5px;--d:0.35s"></span>
<span class="loader-hive__cell" aria-hidden="true" style="translate:-16px 27.5px;--d:0.70s"></span>
<span class="loader-hive__cell" aria-hidden="true" style="translate:-32px 0px;--d:1.05s"></span>
<span class="loader-hive__cell" aria-hidden="true" style="translate:-16px -27.5px;--d:1.40s"></span>
<span class="loader-hive__cell" aria-hidden="true" style="translate:16px -27.5px;--d:1.75s"></span>
</div>CSS
@keyframes loader-hive-cell {
0%, 100% { background: light-dark(#ebedf0, #232529); transform: scale(0.9); }
12% { background: light-dark(#373a40, #f1f2f3); transform: scale(1); }
40% { background: light-dark(#cbced3, #393c41); transform: scale(0.92); }
}
@keyframes loader-hive-core {
0%, 100% { background: light-dark(#6d7179, #7d8087); transform: scale(0.82); }
50% { background: light-dark(#42454c, #e5e6e9); transform: scale(0.95); }
}
.loader-hive { position: relative; width: 104px; height: 100px; }
.loader-hive__cell {
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 34px;
margin: -17px 0 0 -15px;
/* Pointy-top hexagon. */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: light-dark(#ebedf0, #232529);
animation: loader-hive-cell 2.1s ease-out var(--d) infinite;
}
.loader-hive__cell--core { animation: loader-hive-core 1.05s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.loader-hive__cell { animation: none; transform: scale(0.9); }
}Goal: Create a "Hive" loader.
Visual behavior: Seven hexagon cells of a honeycomb: the six outer cells light round the comb in turn while the core pulses at twice the pace.
Technique:
- Each cell is a pointy-top hexagon from clip-path; the six neighbours are placed with translate at the hex grid offsets around the core.
- The outer cells share a flash-and-fade keyframe with delays 0.35s apart, so the light walks round the comb.
- The core breathes between two tones on a keyframe exactly half the outer cycle.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the cells sit still.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Hive" loader.
Visual behavior: Seven hexagon cells of a honeycomb: the six outer cells light round the comb in turn while the core pulses at twice the pace.
Technique:
- Each cell is a pointy-top hexagon from clip-path; the six neighbours are placed with translate at the hex grid offsets around the core.
- The outer cells share a flash-and-fade keyframe with delays 0.35s apart, so the light walks round the comb.
- The core breathes between two tones on a keyframe exactly half the outer cycle.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the cells sit still.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
Seven hexagon cells of a honeycomb: the six outer cells light round the comb in turn while the core pulses at twice the pace.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- continuous, loop, delay stagger
- Techniques
- clip path, keyframes, css variables
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the cells sit still.