Předej skill svému AI agentovi
Zkopíruj prompt. Agent si skill načte a vygeneruje ikony na míru tvému UI.
Pod kapotou
Systém, na kterém stojí každá ikona na tomhle webu.
Prémiové interaktivní micro-animace, které reagují na hover a scroll. Plynulé, robustní a znovupoužitelné napříč celým UI.
Dvě fáze
Stage 1 ikonu rozehraje, Stage 2 ji vždy plynule vrátí. Žádné zaseknuté přechody.
Dva enginy
Framer Motion na vícekrokové sekvence, requestAnimationFrame na výkon bez React re-renderů.
Robustní detaily
Unikátní useId masky proti kolizím a úklid timerů i smyček při unmountu.
V kódu
Jak se s ikonou pracuje.
Každá ikona je obyčejná React komponenta řízená jediným propem hovered. Zbytek (dvě fáze, fyzika, úklid) si řeší sama.
import { useState } from "react";
import { AnimatedWorkflow } from "./icons";
export function IconButton() {
const [hovered, setHovered] = useState(false);
return (
<button
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
<AnimatedWorkflow hovered={hovered} />
</button>
);
}
// Stage 1 hraje na hover, Stage 2 se plynule vrátí
useEffect(() => {
if (hovered) {
ctrl.start({ rotate: 360 }); // rozehrání
} else {
ctrl.start({ rotate: [0, -12, 8, 0] }); // dojezd
}
}, [hovered]);
Krok za krokem: od pózy po vyladěný detail.
Takhle vzniká každá ikona: od prvního návrhu pohybu po vyladěný, uklizený detail. Posuňte se dolů.
Návrh pózy a pohybu
Určíme výchozí a cílový stav ikony a charakter pohybu: squash-and-stretch, overshoot bounce, výměnu prvků nebo vykreslování cesty.
Návrh pózy a pohybu
Určíme výchozí a cílový stav ikony a charakter pohybu: squash-and-stretch, overshoot bounce, výměnu prvků nebo vykreslování cesty.
Volba enginu
Framer Motion pro vícekrokové sekvence a keyframy; requestAnimationFrame pro výkonnou, plně přerušitelnou fyziku bez zbytečných re-renderů.
Volba enginu
Framer Motion pro vícekrokové sekvence a keyframy; requestAnimationFrame pro výkonnou, plně přerušitelnou fyziku bez zbytečných re-renderů.
Dvoufázová logika
Stage 1 ikonu rozehraje, Stage 2 ji vrátí. Rychlý hover-off hlídáme přes pendingReturnRef a timerRef, aby se nic nezaseklo.
Dvoufázová logika
Stage 1 ikonu rozehraje, Stage 2 ji vrátí. Rychlý hover-off hlídáme přes pendingReturnRef a timerRef, aby se nic nezaseklo.
Ošetření a úklid
Unikátní useId pro masky, fixní wrapper proti layout shiftu a clearTimeout / cancelAnimationFrame při unmountu.
Ošetření a úklid
Unikátní useId pro masky, fixní wrapper proti layout shiftu a clearTimeout / cancelAnimationFrame při unmountu.
Skill je veřejný na GitHubu.
Odkaz na repozitář předáte svému AI agentovi. Stáhne si zdrojový kód, nakonfiguruje ho a nasadí do vašeho stacku za vás.
Máte nápad?
Vytvořme ho spolu.
Napište nám pár vět o tom, co chcete postavit či vytvořit. Do dvou pracovních dnů se ozveme s první bezplatnou konzultací.