Motion knihovna — 61 animací značky ve skupinách: vstupy, text, obraz & grafika, smyčky, přechody & interakce, choreografie, gesto (fluidní kruh). Najetím se přehraje, smyčky běží pořád, interaktivní ukázky reagují na myš. Pod každou: GIF, PNG a kopírování kódu. Hromadné exporty: složka export/ · masterka-motion.css (CSS verze bez knihoven) · README.

Masterka Design — Prague
01 — Vstupy · Fade up

Lišty, meta, popisky. Jemné vynoření o 16 px.

data-a="fade" · 1.1 s · expo.out · y 24→0, opacity 0→1

Out of
focus.

02 — Vstupy · Blur in

Rozostřené → ostré. Pro velké titulky a obrázky na tmavém.

data-a="blur" · 1.6 s · expo.out · blur 28px→0, scale 1.06→1
Masterka
03 — Vstupy · Scale in

Karty, odznaky, ikony. Vyrostou z 82 %.

data-a="scale" · 1.4 s · expo.out · scale .86→1 + blur 10px→0

From the
left.

04 — Vstupy · Slide from left

Prvky v řadě, odstavce, navigace.

data-a="left" · 1.4 s · expo.out · x −140→0, skewX 8°→0

From the
right.

05 — Vstupy · Slide from right

Protipohyb k levému — pro dvojice prvků.

data-a="right" · 1.4 s · expo.out · x 140→0, skewX −8°→0

Tilted
entrance.

06 — Vstupy · Rotate in

Hravý vstup s lehkým natočením z rohu.

data-a="rotate" · 1.5 s · expo.out · rotate −8°→0, y 70→0
07 — Vstupy · Clip reveal

Obrázky a karty. Odkrytí zdola nahoru.

data-a="clip" · 1.5 s · expo.inOut · inset(100% 0 0 0)→inset(0)
08 — Vstupy · Wipe

Horizontální odkrytí zleva — bannery, široké obrázky.

data-a="wipe" · 1.5 s · expo.inOut · inset(0 100% 0 0)→inset(0)
09 — Vstupy · Curtain

Oranžová opona odjede nahoru a odhalí obsah.

data-a="curtain" + .curtain uvnitř · 1.4 s · expo.inOut · scaleY 1→0
01Branding✦
02Motion✦
03AI Workflows✦
04UI/UX & Web✦
05Art Direction✦
10 — Vstupy · Stagger

Seznamy a řádky. Postupně, 80 ms po sobě.

data-a="stagger" · 1.2 s · expo.out · stagger 0.09 s
11 — Vstupy · Grid pop

Mřížky, ikony, galerie. Ze středu ven.

data-a="grid" · 0.8 s · back.out(1.6) · stagger from center
12 — Vstupy · Star burst

Hvězdy vystřelí se zpožděním — oslava, launch.

data-a="burst" · 1 s · back.out(1.8) · stagger 0.06 s
13 — Kreativní vstupy · Pixel reveal

Mřížka oranžových pixelů se rozpadne — stejně jako přechod mezi stránkami webu.

data-a="pixel" (data-cover="#FF4400") · 48 pixelů · 0.9 s náhodné pořadí
14 — Kreativní vstupy · Unfold

Rozevření od středu do stran — široké obrázky, bannery.

data-a="unfold" · 1.6 s · expo.inOut · inset(0 50% 0 50%)→inset(0)

Bold &
energetic.

15 — Kreativní vstupy · Skew rise

Text se vynoří se zkosením — energické titulky.

data-a="skew" · 1.5 s · expo.out · skewY 10°→0, yPercent 40→0
✦ New work
16 — Kreativní vstupy · Elastic pop

Pružný „pop“ — odznaky, nálepky, hvězda.

data-a="elastic" · 1.8 s · elastic.out(1, .45) · scale 0→1
Creative Soul
17 — Kreativní vstupy · Tracking in

Rozvolněné písmo se stáhne a zaostří — elegantní pro logo a hesla.

data-a="tracking" · 1.8 s · expo.out · letter-spacing .6em→0 + blur 12px→0
Design that feels quiet until you look closer
18 — Kreativní vstupy · Words rise

Slovo po slově, každé s natočením.

data-a="words" · 1.3 s · expo.out · stagger 0.07 s
19 — Kreativní vstupy · Star swirl

Hvězdy se stočí do kompozice z vírů.

data-a="swirl" · 1.6 s · expo.out · rotate −360°, spirála

Quiet until
you look closer.

20 — Senior reveals · Soft rise

Měkké vynoření s doostřením — výchozí pro bloky textu a karty.

data-a="soft" · 1.6 s · expo.out · y 60→0, blur 10px→0
21 — Senior reveals · Card expand

Pilulka se rozvine do celé karty a obraz se usadí — hero momenty.

data-a="expand" · 1.8 s · expo.inOut · inset(22% 26% round 999px)→inset(0 round 6px) + img scale 1.35→1
Creative
Soul
22 — Senior reveals · Text fill

Obrysový titulek se plynule vyplní barvou — statementy, kapitoly.

data-a="fill" · 1.8 s · expo.inOut · stroke 1px + background-clip text 0→100 %
23 — Senior reveals · Drawer

Obraz vyjede zleva s protipohybem uvnitř — galerie, case studies.

data-a="drawer" · 1.6 s · expo.inOut · inset(0 100% 0 0)→0 + img x −28 %→0
24 — Senior reveals · Parallax reveal

Odkrytí zdola, obraz uvnitř vyjede proti pohybu a usadí se — signature reveal.

data-a="reveal" · 1.6 s expo.inOut + img y 28 %→0, scale 1.25→1 · 2 s expo.out
Masterka — 2026
Layers of
depth.

Each layer arrives at its own speed — like a camera move.

25 — Senior reveals · Depth layers

Vrstvy přijedou s různou hloubkou — čím dál, tím pomaleji.

data-a="layers" · 1.7 s · expo.out · y 60 + n × 50 → 0, stagger 0.1 s

Turning complex
ideas into visuals.

26 — Text · Lines rise

Titulky. Řádek vyjede zpod masky s natočením.

data-a="lines" · 1.3 s · expo.out · stagger 0.1 s · yPercent 115→0, rotate 3°→0
Creative Soul
27 — Text · Chars

Písmeno po písmenu — krátká hesla, čísla.

data-a="chars" · 1.2 s · expo.out · stagger 0.03 s · rotate 10°→0
Hello, I’m Tereza▍
28 — Text · Typewriter

Psací stroj s blikajícím kurzorem.

data-a="type" + data-loop="blink" na kurzoru · 60 ms / znak
AI WORKFLOWS
29 — Text · Scramble

Dekódování textu — tech, AI, kód.

data-a="scramble" · 1.4 s · linear
20+
30 — Text · Counter

Čísla se napočítají — KPI, statistiky.

data-a="count" data-to="20" data-suffix="+" · 1.6 s · power3.out
Details matter
31 — Text · Underline draw

Podtržení se nakreslí pod klíčovým slovem.

data-a="underline" + .ul · 1 s · power3.inOut · scaleX 0→1
structured beauty
32 — Text · Marker

Zvýrazňovač přejede přes text.

data-a="marker" · 1 s · power3.inOut · background-size 0→100 %
let’s talk
33 — Text · Wave

Smyčka: písmena se vlní — hravé momenty.

data-loop="wave" · 0.5 s yoyo · posun 80 ms
Masterka
34 — Text · Logo reveal

Logo se vysune, hvězda doskočí +0.45 s.

data-a="wm" · 1 s · power4.out + back.out(1.8)
35 — Obraz & grafika · Settle zoom

Obrázek se usadí z přiblížení — s clipem.

data-a="zoom" · 2.6 s · power2.out · scale 1.18→1
36 — Obraz & grafika · Ken Burns

Pomalý přejezd a oddálení — hero, full-bleed.

data-a="kenburns" · 3 s · linear · scale 1.25→1, x −4 %
37 — Obraz & grafika · Star spin-in

Hvězda vždy přichází poslední — podpis animace.

data-a="star" · 1.4 s · elastic.out(1, .55) · scale 0→1, rotate −180°→0
38 — Obraz & grafika · Line draw

Obrys hvězdy se nakreslí — technické, konstrukční momenty.

data-a="draw" na SVG · 1.6 s · power3.inOut · stroke-dashoffset
39 — Obraz & grafika · Hairline grow

Linky, timeline, progress. Kreslí se zleva.

data-a="grow" · 1.1 s · power3.inOut · scaleX 0→1
41 — Smyčky · Aura drift

Barevné bloby se pomalu vlní. Perioda 3 s.

data-loop="drift" data-dx data-dy · 3 s yoyo · sine.inOut
42 — Smyčky · Spin

Hvězda se otočí o 90° za 3 s — díky symetrii plynule.

data-loop="spin" data-step="90" · 3 s · linear
43 — Smyčky · Counter spin

Dvě hvězdy proti sobě — dynamická dvojice.

data-loop="spin" + data-loop="spinrev"
44 — Smyčky · Twinkle

Hvězdy v souhvězdí pulzují s posunem.

data-loop="twinkle" na kontejneru · 0.75 s yoyo
Branding Motion AI Workflows Branding Motion AI Workflows Branding Motion AI Workflows Branding Motion AI Workflows
45 — Smyčky · Marquee

Nekonečný pás textu — 4 stejné kopie.

data-loop="marquee" data-k="2" · 6 s · linear
Masterka
46 — Smyčky · Float

Jemné vznášení — karty, ilustrace.

data-loop="float" data-dy="22" · 3 s yoyo
● Open for projects
47 — Smyčky · Pulse

Dýchání — status, CTA, „live“ tečka.

data-loop="pulse" data-s="1.08" · 3 s yoyo
48 — Smyčky · Glow

Pulzující záře za prvkem.

data-loop="glow" · 3 s yoyo · opacity .35→1
M
49 — Smyčky · Orbit

Hvězda obíhá kolem středu — loadery, odznaky.

data-loop="orbit" na rotujícím kontejneru · 3 s / otáčka
Masterka
50 — Smyčky · Shimmer

Odlesk přejede přes plochu — glass, tlačítka.

data-loop="shimmer" · 3 s · linear · gradient 110°
Masterka
51 — Smyčky · Gradient shift

Sunrise gradient se přelévá.

data-loop="gradient" · 3 s yoyo · background-position
Swipe →
52 — Smyčky · Bounce

Poskočení — upozornění, „swipe“, šipky.

data-loop="bounce" data-dy="40" · 1 s + pauza
53 — Smyčky · Sway

Houpání kolem spodní hrany — ilustrace, razítka.

data-loop="sway" data-deg="6" · 3 s yoyo
54 — Přechody & interakce · Deck wipe

Přechod mezi slidy: oranžové stírání s hvězdou.

deck.js · 0.45 s in + 0.5 s out · power3.inOut
Masterka
55 — Přechody & interakce · Tilt (interaktivní)

Glass karta se naklání ke kurzoru. Vyzkoušej myší.

data-tilt · perspective · elastic návrat
Masterka
56 — Přechody & interakce · Parallax (interaktivní)

Vrstvy se posouvají s kurzorem podle hloubky.

data-depth="0.2 … 1"
MasterkaNotes

Small details,
big difference.

57 — Choreografie · Post

Lišty → titulek → obrázek → hvězda → spodní lišta.

0 s rails · 0.2 lines · 0.4 clip+zoom · 0.9 star · 1.1 rails

Let’s build
something unique.

Masterka
58 — Choreografie · Aura card

Aura → glass karta (scale) → titulek → logo.

0 drift · 0.1 scale · 0.4 lines · 0.9 wm
Something new
59 — Choreografie · Launch

Sunrise → burst hvězd → titulek po písmenech.

0 burst · 0.3 chars · loop twinkle

Turning complex ideas into visual reality.

60 — Gesto · Ring draw

Zakroužkování jednoho slova jako tužkou. Jedno slovo na kompozici.

data-a="ringdraw" · 1.5 s · power2.inOut · přetah 30°
61 — Gesto · Ring pulse

Šplouch jako kurzor: deformace vystřelí a elasticky se usadí. Hover na tlačítku / monogramu.

data-a="ringpulse" · 14 → 35 px → elastic.out(1, .3)