Разборы: P01/, P03/, P04/,
P09/ (sheet.jpg, keyframes/, breakdown.md/json). Метка
~ = оценка на глаз; остальное замерено (opencv
phase-correlation, цветовая заливка, энергия кадров, ffmpeg).
| № | Приём | Параметры (замер) | Рецепт GSAP/CSS для HyperFrames |
|---|---|---|---|
| 1 | Prompt-бар с неоновой рамкой + быстрая печать | 44 символа за 0.7 с = 60 симв/с; рамка conic, 3 с оборот, glow 24–40 px (P03) | рамка: two-background + conic-gradient(from var(--a)),
to(root,{'--a':'360deg',duration:3,ease:'none',repeat:-1});
печать to(o,{n:44,duration:.7,ease:'none',onUpdate}); поле
растёт в высоту 0.2 с expo.out |
| 2 | Стеклянный 3D-курсор-«персонаж» | крупный (~8% высоты кадра), иризация; тащит файл-чип; клик scale .88, 0.1 с (P03; в P01 стрелка, в P04 рука) | SVG/PNG курсор + motionPath по дуге 0.8 с power2.inOut;
клик
to(c,{scale:.88,duration:.05}).to(c,{scale:1,duration:.1})
+ кольцо-волна scale 0→2, opacity 1→0, 0.4 с |
| 3 | Залёт панели в 3D | translateZ −600→0, rotateX 40°→8°, rotateY −25°→−8°, 0.9 с power3.out (P03) | .stage{perspective:900px};
from(p,{z:-600,rotationX:40,rotationY:-25,opacity:0,duration:.9,ease:'power3.out'}) |
| 4 | UI-доска в изометрии | 12–15 панелей, rotateY ≈ −12°, rotateX ≈ 8° ~, stagger
80–120 мс, expo.out 0.7 с, «дыхание» 4 с (P01) |
perspective:1200px;
from(.panel,{y:120,scale:.9,opacity:0,stagger:.1,ease:'expo.out',duration:.7});
затем
to(board,{rotationY:-8,x:-30,duration:4,ease:'power1.inOut'}) |
| 5 | Zoom-out раскрытие | scale 3.2→1 за ~1 с expo.out ~, из панели ввода в весь
дашборд (P03) |
from(root,{scale:3.2,transformOrigin:'30% 85%',duration:1,ease:'expo.out'}) |
| 6 | Фокус на элемент + затемнение остального | opacity остальных .35, scale .98, 0.4 с (P03); в P04 строки .3→1 за 0.3 с, контраст ×2.3 | to('.card:not(.on)',{opacity:.35,scale:.98,duration:.4});
активная строка opacity:1; color:#3c3c3c |
| 7 | Вертикальный сдвиг карточек (слайдер) | прогресс 0/25/50/75/100% времени = 0/47/80/96/100% по координате, 0.6 с, цикл 2.2 с (P04) | from(next,{y:'100%'}); to(cur,{y:'-100%'}); duration:.6, ease:'power2.out'
в overflow:hidden-контейнере |
| 8 | Тумблер-включатель | заливка 12/42/67/88/99% на 0.24/0.32/0.40/0.56/0.80 с, задержка 0.16 с (P04) | to(thumb,{x:56,duration:.7,delay:.16,ease:'power2.out'});
to(track,{backgroundColor:'#1b6bf5'}); курсор-рука scale
.88 в начале |
| 9 | Камера-полёт сквозь длинную страницу | perspective ~700 px, rotateX ≈ 65° ~; 5 ступеней
прокрутки по 0.2–0.4 с power3.out + дрейф между (P09) |
.page{transform-style:preserve-3d};
tl.to(page,{y:-X1,duration:.35,ease:'power3.out'}).to(page,{y:-X2,duration:.9,ease:'none'})… |
| 10 | Motion-blur по скорости | blur по Y 10–30 px на быстрых участках (P09), ~8 px 2–3 кадра (P03) | onUpdate читает скорость →
filter:blur(Vpx); max 24 px; на остановке → 0 за 0.15
с |
| 11 | Roll-up счётчика | 91→121 за ≈1 с power2.out, цифры 14% высоты кадра (P03) | to(o,{val:121,duration:1,ease:'power2.out',onUpdate});
font-variant-numeric:tabular-nums |
| 12 | Рисуемая линия-маршрут | stroke-dash 1→0 за 1 с power2.inOut (P01 «Clear actions») | to(path,{strokeDashoffset:0,duration:1,ease:'power2.inOut'}) |
| 13 | Морф «точка → прямоугольник → мокап» | scale + форма, 0.6 с expo.out (P01) | to(el,{borderRadius:'24px',width:W,height:H,duration:.6,ease:'expo.out'}) |
| 14 | Посадка из полёта на статичный CTA | y +6%, scale 1.15→1, 0.8 с expo.out + холд 5 с (P09) | to(hero,{scale:1,y:0,duration:.8,ease:'expo.out'}),
затем держать кадр |
| 15 | Иризирующее стекло карточки | blur 14 px, белый 70→45%, радужный overlay soft-light 25% (P04) | см. правила стекла ниже |
| 16 | Параллакс слоёв | передний быстрее заднего в 1.4–1.6× (P03), фон 0.8× (P04) | to(front,{x:-A}); to(back,{x:-A*.65}) одинаковая
длительность |
| 17 | Сквозной символ-проводник | искра 8 лепестков, scale 0→1.4→1 back.out(1.7) 0.5 с, rotate 90° (P01) | SVG-звезда +
fromTo(spark,{scale:0,rotation:-90},{scale:1,rotation:0,ease:'back.out(1.7)',duration:.5}) |
| 18 | Смена активной строки в списке | 2.2 с на пункт, точка-маркер 0.35 с power2.out (P04) | to(dot,{y:rowY,duration:.35,ease:'power2.out'}) |
0 12px 30px rgba(0,0,0,.15) на светлом,
0 24px 60px rgba(0,0,0,.5) на тёмном; для неона цветное
свечение вместо тени
(drop-shadow(0 0 24px #ff9a3c88)).backdrop-filter:blur(14–20px), фон белый 45–70%
(светлое) или чёрный 20–30% (тёмное), бордер 1 px белый 60%; радужный
overlay 25% soft-light (премиум-деталь P04).0 → 12 400 за 1 с, цифра
14% высоты кадра._, ведущий зрителя между сценами.Бонус: холд 2–5 с на финальном CTA (P09), смена тёмной/светлой темы на смене смысла (P01), лаймовая плашка на ключевом слове (P01).