initial: ads-stories project with interesting theme
This commit is contained in:
Никита committed
commit
2b4d8fcc43
36 files changed
+3433
No files matched your search
@@ -0,0 +1,87 @@
|
|||||||
|
# HyperFrames Composition Project
|
||||||
|
|
||||||
|
## Skills — USE THESE FIRST
|
||||||
|
|
||||||
|
**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
|
||||||
|
|
||||||
|
**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), and routes every "make me a video" request to the right workflow. Read it first, especially when there's no project context to orient you. The video workflows it routes to:
|
||||||
|
|
||||||
|
- `/product-launch-video` — a **product** URL or brief / script → 60-90s product launch / SaaS / promo video.
|
||||||
|
- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured visuals); a product **launch / promo** is `/product-launch-video`.
|
||||||
|
- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
|
||||||
|
- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
|
||||||
|
- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
|
||||||
|
- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
|
||||||
|
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||||
|
- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes authoring flow, any length.
|
||||||
|
|
||||||
|
**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
|
||||||
|
|
||||||
|
The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-creative`, `/hyperframes-cli`, `/hyperframes-media`, `/hyperframes-registry`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
|
||||||
|
|
||||||
|
> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
|
||||||
|
|
||||||
|
> **Skills not available or need updating?** Run `npx skills add heygen-com/hyperframes`
|
||||||
|
> and restart the agent session so the new skills load.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev # start the preview server (long-running — keep it alive in background)
|
||||||
|
npm run check # lint + validate + inspect
|
||||||
|
npm run render # render to MP4
|
||||||
|
npm run publish # publish and get a shareable link
|
||||||
|
npx hyperframes lint --verbose # include info-level findings
|
||||||
|
npx hyperframes lint --json # machine-readable output for CI
|
||||||
|
npx hyperframes docs <topic> # reference docs in terminal
|
||||||
|
```
|
||||||
|
|
||||||
|
> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
|
||||||
|
> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
|
||||||
|
> command — it will time out and the server will die, breaking the browser preview.
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
**For quick reference**, use the local CLI docs command (no network required):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx hyperframes docs <topic>
|
||||||
|
```
|
||||||
|
|
||||||
|
Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
|
||||||
|
|
||||||
|
**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://hyperframes.heygen.com/llms.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
- `index.html` — main composition (root timeline)
|
||||||
|
- `compositions/` — sub-compositions referenced via `data-composition-src`
|
||||||
|
- `meta.json` — project metadata (id, name)
|
||||||
|
- `transcript.json` — whisper word-level transcript (if generated)
|
||||||
|
|
||||||
|
## Linting — ALWAYS RUN AFTER CHANGES
|
||||||
|
|
||||||
|
After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run check
|
||||||
|
```
|
||||||
|
|
||||||
|
Fix all errors before presenting the result. Inspect warnings should be reviewed before rendering.
|
||||||
|
|
||||||
|
## Key Rules
|
||||||
|
|
||||||
|
1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
|
||||||
|
2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
|
||||||
|
3. Timelines must be paused and registered on `window.__timelines`:
|
||||||
|
```js
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
window.__timelines["composition-id"] = gsap.timeline({ paused: true });
|
||||||
|
```
|
||||||
|
4. Videos use `muted` with a separate `<audio>` element for the audio track
|
||||||
|
5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
|
||||||
|
6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
# HyperFrames Composition Project
|
||||||
|
|
||||||
|
## Skills — USE THESE FIRST
|
||||||
|
|
||||||
|
**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
|
||||||
|
|
||||||
|
**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), and routes every "make me a video" request to the right workflow. Read it first, especially when there's no project context to orient you. The video workflows it routes to:
|
||||||
|
|
||||||
|
- `/product-launch-video` — a **product** URL or brief / script → 60-90s product launch / SaaS / promo video.
|
||||||
|
- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured visuals); a product **launch / promo** is `/product-launch-video`.
|
||||||
|
- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
|
||||||
|
- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
|
||||||
|
- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
|
||||||
|
- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
|
||||||
|
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||||
|
- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes authoring flow, any length.
|
||||||
|
|
||||||
|
**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
|
||||||
|
|
||||||
|
The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-creative`, `/hyperframes-cli`, `/hyperframes-media`, `/hyperframes-registry`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
|
||||||
|
|
||||||
|
> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
|
||||||
|
|
||||||
|
> **Skills not available or need updating?** Run `npx skills add heygen-com/hyperframes`
|
||||||
|
> and restart the agent session so the new skills load.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev # start the preview server (long-running — keep it alive in background)
|
||||||
|
npm run check # lint + validate + inspect
|
||||||
|
npm run render # render to MP4
|
||||||
|
npm run publish # publish and get a shareable link
|
||||||
|
npx hyperframes lint --verbose # include info-level findings
|
||||||
|
npx hyperframes lint --json # machine-readable output for CI
|
||||||
|
npx hyperframes docs <topic> # reference docs in terminal
|
||||||
|
```
|
||||||
|
|
||||||
|
> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
|
||||||
|
> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
|
||||||
|
> command — it will time out and the server will die, breaking the browser preview.
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
**For quick reference**, use the local CLI docs command (no network required):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx hyperframes docs <topic>
|
||||||
|
```
|
||||||
|
|
||||||
|
Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
|
||||||
|
|
||||||
|
**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://hyperframes.heygen.com/llms.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
- `index.html` — main composition (root timeline)
|
||||||
|
- `compositions/` — sub-compositions referenced via `data-composition-src`
|
||||||
|
- `meta.json` — project metadata (id, name)
|
||||||
|
- `transcript.json` — whisper word-level transcript (if generated)
|
||||||
|
|
||||||
|
## Linting — ALWAYS RUN AFTER CHANGES
|
||||||
|
|
||||||
|
After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run check
|
||||||
|
```
|
||||||
|
|
||||||
|
Fix all errors before presenting the result. Inspect warnings should be reviewed before rendering.
|
||||||
|
|
||||||
|
## Key Rules
|
||||||
|
|
||||||
|
1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
|
||||||
|
2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
|
||||||
|
3. Timelines must be paused and registered on `window.__timelines`:
|
||||||
|
```js
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
window.__timelines["composition-id"] = gsap.timeline({ paused: true });
|
||||||
|
```
|
||||||
|
4. Videos use `muted` with a separate `<audio>` element for the audio track
|
||||||
|
5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
|
||||||
|
6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
|
||||||
+397
@@ -0,0 +1,397 @@
|
|||||||
|
# 📐 STORYBASE — База для серии Stories-роликов
|
||||||
|
|
||||||
|
> **Статус:** Foundation Document v1.0 (2026-07-05)
|
||||||
|
> **Автор:** Architect (Никита)
|
||||||
|
> **Назначение:** Единый источник истины для всей серии вертикальных рекламных роликов (Stories/Reels/Shorts)
|
||||||
|
> **Формат:** 1080×1920 (9:16) — универсально для WhatsApp Stories, Instagram, Telegram, VK
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. БИЗНЕС-ПРОФИЛЬ
|
||||||
|
|
||||||
|
### 1.1 Продуктовый портфель
|
||||||
|
|
||||||
|
| # | Продукт | Тип | Статус | Описание |
|
||||||
|
|---|---------|-----|--------|----------|
|
||||||
|
| P1 | **ROI24** | SaaS-платформа | Production | Автоматизация маркетинга: AI-генерация, чат-боты, рассылки, парсинг, упаковка |
|
||||||
|
| P2 | **Call24** | SaaS-сервис | Production | AI-аналитика звонков: распознавание намерений, оценка менеджеров, инсайты |
|
||||||
|
| P3 | **152-fz checker** | Web-сервис | Production | Проверка сайтов и процессов на соответствие 152-ФЗ (персональные данные) |
|
||||||
|
| P4 | **Локальный AI** | Инфраструктура | Production | Развёртывание LLM на своём железе (Qwen3.6-35B-A3B, 2×RTX 3080 Ti) |
|
||||||
|
|
||||||
|
### 1.2 Позиционирование
|
||||||
|
|
||||||
|
> **"Локальный AI-суверенитет для российского бизнеса"**
|
||||||
|
> Мы строим инфраструктуру: автоматизация, аналитика, защита данных, локальный ИИ.
|
||||||
|
> Не консалтинг. Не аутсорс. Готовые продукты.
|
||||||
|
|
||||||
|
**УТП:**
|
||||||
|
1. **Полный контроль данных** — локальное развёртывание, 152-ФЗ out-of-the-box
|
||||||
|
2. **Готовые продукты** — не "интеграция под заказ", а SaaS, который работает сегодня
|
||||||
|
3. **Синергия экосистемы** — ROI24 + Call24 + 152-fz + Local AI = полный цикл
|
||||||
|
4. **Техническая глубина** — основано на реальном опыте (150+ ПК сеть, реальные GPU-кластеры)
|
||||||
|
|
||||||
|
### 1.3 Целевая аудитория (CVP — Customer Value Profile)
|
||||||
|
|
||||||
|
#### Primary: Владельцы бизнеса / CEO (60% фокуса)
|
||||||
|
- Возраст: 30–50
|
||||||
|
- Боль: "трачу на маркетинг, но не вижу возврата"
|
||||||
|
- Язык: цифры, ROI, конкретика, без жаргона
|
||||||
|
- Боли: потерянные лиды, неоптимизированные бюджеты, штрафы за 152-ФЗ
|
||||||
|
- Мотивация: рост прибыли, контроль, конкурентное преимущество
|
||||||
|
|
||||||
|
#### Secondary: Технический директор / CTO (25% фокуса)
|
||||||
|
- Возраст: 28–45
|
||||||
|
- Боль: "зависимость от облаков, данные у третьих лиц"
|
||||||
|
- Язык: архитектура, безопасность, масштабируемость, SLA
|
||||||
|
- Боли: комплаенс, интеграции, производительность
|
||||||
|
- Мотивация: независимость, контроль, предсказуемость
|
||||||
|
|
||||||
|
#### Tertiary: Маркетинг-директор (15% фокуса)
|
||||||
|
- Возраст: 25–40
|
||||||
|
- Боль: "инструменты не работают в связке"
|
||||||
|
- Язык: метрики, конверсия, автоматизация
|
||||||
|
- Боли: фрагментация каналов, ручная рутина, отсутствие сквозной аналитики
|
||||||
|
- Мотивация: эффективность, автоматизация, data-driven решения
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. КОНТЕНТНАЯ СТРАТЕГИЯ
|
||||||
|
|
||||||
|
### 2.1 Рубрикатор
|
||||||
|
|
||||||
|
| Рубрика | Цель | Формат | Частота | Продукт |
|
||||||
|
|---------|------|--------|---------|---------|
|
||||||
|
| **🔥 Pain** | Попасть в боль ЦА | 15s, контраст, шок-факт | 40% | Любая |
|
||||||
|
| **💡 Solution** | Показать решение | 15–20s, визуализация | 30% | P1–P4 |
|
||||||
|
| **📊 Social Proof** | Доверие, кейсы | 15s, цифры, факты | 15% | Любая |
|
||||||
|
| **⚡ Quick Win** | Быстрая польза | 10–15s, лайфхак | 10% | Любая |
|
||||||
|
| **🎯 Brand** | Позиционирование | 15s, философия | 5% | Все |
|
||||||
|
|
||||||
|
### 2.2 Контентный микс по продуктам
|
||||||
|
|
||||||
|
| Продукт | Рубрика | Пример заголовка |
|
||||||
|
|---------|---------|-------------------|
|
||||||
|
| ROI24 | Pain | "Сколько лидов утекает пока вы спите?" |
|
||||||
|
| ROI24 | Solution | "3 автоматизации, которые заменят 5 маркетологов" |
|
||||||
|
| Call24 | Pain | "Ваш менеджер врёт. И вы это знаете." |
|
||||||
|
| Call24 | Solution | "Каждый звонок — аналитика. Не мнение." |
|
||||||
|
| 152-fz | Pain | "Штраф за 152-ФЗ: сколько стоит один клик" |
|
||||||
|
| 152-fz | Solution | "Проверка сайта за 5 секунд. Не за 500K ₽" |
|
||||||
|
| Local AI | Solution | "LLM на своём сервере. Данные не уходят в облако." |
|
||||||
|
| Local AI | Brand | "ИИ, которому доверяют. Локальный, контролируемый, ваш." |
|
||||||
|
|
||||||
|
### 2.3 Формула каждого ролика
|
||||||
|
|
||||||
|
```
|
||||||
|
0–2s : HOOK — цепляющий вопрос/факт/число (остановка скролла)
|
||||||
|
2–7s : PAIN — проблема, которую зритель узнает
|
||||||
|
7–12s : SOLUTION — ваш продукт как ответ
|
||||||
|
12–15s : CTA — конкретное действие (ссылка в шапке профиля)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Правило 3-х секунд:** Если нет хука до 3-й секунды — ролик не работает.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. КРЕАТИВНАЯ НАПРАВЛЕННОСТЬ
|
||||||
|
|
||||||
|
### 3.1 Дизайн-система
|
||||||
|
|
||||||
|
**Базовая:** Bauhaus + Apple fusion (согласно AGENTS.md)
|
||||||
|
- Минимализм, геометрия, функциональная эстетика
|
||||||
|
- Много воздуха, чёткая типографика, отсутствие визуального шума
|
||||||
|
- Вдохновение: Apple product pages, Bauhaus exhibition designs
|
||||||
|
|
||||||
|
**Цветовая палитра:**
|
||||||
|
- **Primary Dark:** `#050508` (фон, глубокий чёрный)
|
||||||
|
- **Primary White:** `#FFFFFF` (текст, акцентный)
|
||||||
|
- **Accent Blue:** `#0F62FE` (IBM Carbon B2 — кнопка, CTA)
|
||||||
|
- **Accent Cyan:** `#00B8D4` (технологичность, AI)
|
||||||
|
- **Accent Purple:** `#8A2BE2` (инновации, AI-градиент)
|
||||||
|
- **Gradient AI:** `#00B8D4` → `#8A2BE2` → `#0F62FE` (AI-контент)
|
||||||
|
- **Warning:** `#E34850` (боли, штрафы, проблемы)
|
||||||
|
- **Success:** `#18A55A` (решения, результаты)
|
||||||
|
- **Muted:** `rgba(255,255,255,0.5–0.7)` (вторичный текст)
|
||||||
|
|
||||||
|
### 3.2 Типографика
|
||||||
|
|
||||||
|
- **Заголовки (Hero):** Inter Bold/Black, 110–120px, tight tracking (-0.03em)
|
||||||
|
- **Подзаголовки:** Inter SemiBold, 68–72px, tight tracking
|
||||||
|
- **Основной текст:** Inter Regular/Medium, 42–48px, line-height 1.4
|
||||||
|
- **Моноширинный (для данных/кода):** JetBrains Mono, 32px
|
||||||
|
- **CTA (кнопка):** Inter Bold, 52px, uppercase, letter-spacing 0.05em
|
||||||
|
|
||||||
|
### 3.3 Движение и анимация
|
||||||
|
|
||||||
|
**Принцип:** Минимальные анимации, максимальная читаемость. Каждая анимация должна служить пониманию, а не украшательству.
|
||||||
|
|
||||||
|
**Анимационный словарь:**
|
||||||
|
- `fade-up` — плавное появление снизу (основной entrance)
|
||||||
|
- `scale-up` — появление с масштабированием (для CTA, цифр)
|
||||||
|
- `slide-left` — сдвиг слева направо (для последовательных элементов)
|
||||||
|
- `fade-in` — простое появление (для текста)
|
||||||
|
- `pulse` — лёгкая пульсация (для CTA, акцентов)
|
||||||
|
- `count-up` — анимация счётчика (для цифр, метрик)
|
||||||
|
|
||||||
|
**Правила анимации:**
|
||||||
|
1. Время entrance: 0.5–0.8s, ease: power3.out
|
||||||
|
2. Время exit: 0.25–0.35s, ease: power2.in
|
||||||
|
3. Stagger между элементами: 0.1–0.15s
|
||||||
|
4. Никаких бесконечных анимаций (repeat: -1 запрещён)
|
||||||
|
5. Каждый элемент появляется и исчезает по таймлайну
|
||||||
|
|
||||||
|
### 3.4 Композиция кадра (1080×1920)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────┐
|
||||||
|
│ Safe zone (top 15%) │ ← Логотип / Брэндинг (не тропаемый UI)
|
||||||
|
│ │
|
||||||
|
│ ┌───────────────────┐ │
|
||||||
|
│ │ HERO TEXT │ │ ← Hook (центр-верх)
|
||||||
|
│ │ (110px, bold) │ │
|
||||||
|
│ └───────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ │
|
||||||
|
│ ┌───────────────────┐ │
|
||||||
|
│ │ BODY TEXT │ │ ← Pain/Solution
|
||||||
|
│ │ (42-48px) │ │
|
||||||
|
│ └───────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ Safe zone (bottom 20%) │ ← CTA + кнопка (не перекрывается UI)
|
||||||
|
└─────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Safe zones:**
|
||||||
|
- **Верх:** минимум 280px от верха (Instagram/WhatsApp UI overlay)
|
||||||
|
- **Низ:** минимум 380px от низа (WhatsApp/Telegram UI overlay)
|
||||||
|
- **Безопасная область текста:** Y=280px — Y=1540px (1260px высота для контента)
|
||||||
|
|
||||||
|
### 3.5 Tone of Voice
|
||||||
|
|
||||||
|
- **Уверенный, но не самонадеянный.** Знает, но не давит.
|
||||||
|
- **Цифры > прилагательные.** "Экономит 40 часов/мес" не "очень экономит".
|
||||||
|
- **Прямой, без воды.** Как разговор с инженером, который решил проблему.
|
||||||
|
- **Технически точный.** Нет "ИИ-волшебство", есть конкретные механизмы.
|
||||||
|
- **Российский контекст.** Понимает локальные боли (152-ФЗ, импортозамещение, локальный ИИ).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. ТЕХНИЧЕСКАЯ СПЕЦИФИКАЦИЯ
|
||||||
|
|
||||||
|
### 4.1 Формат и рендер
|
||||||
|
|
||||||
|
| Параметр | Значение |
|
||||||
|
|----------|----------|
|
||||||
|
| Разрешение | 1080 × 1920 px (9:16) |
|
||||||
|
| Длительность | 10–15 секунд (sweet spot для Stories) |
|
||||||
|
| FPS | 30fps (достаточно для motion design) |
|
||||||
|
| Формат рендера | MP4 (H.264, High Profile) |
|
||||||
|
| Bitrate | 8–12 Mbps |
|
||||||
|
| Аудио | Опционально, AAC 192kbps |
|
||||||
|
| Подписи | Обязательно (85% Stories смотрятся без звука) |
|
||||||
|
|
||||||
|
### 4.2 HyperFrames проект
|
||||||
|
|
||||||
|
```
|
||||||
|
ads-stories/
|
||||||
|
├── index.html # Главная композиция (master timeline)
|
||||||
|
├── compositions/
|
||||||
|
│ └── scene-NN-*.html # Фреймы-субкомпозиции (если нужны)
|
||||||
|
├── assets/ # Логотипы, иконки, медиа
|
||||||
|
├── hyperframes.json # Метаданные проекта
|
||||||
|
├── frame.md # Дизайн-система (цвет, тип, layout)
|
||||||
|
├── STORYBOARD.md # План роликов (shot-by-shot)
|
||||||
|
└── renders/ # Рендеры MP4
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4.3 Технический стек
|
||||||
|
|
||||||
|
- **HyperFrames v0.7.33** — рендер видео из HTML
|
||||||
|
- **GSAP 3.14** — timeline-based анимации
|
||||||
|
- **Inter + JetBrains Mono** — шрифты (Google Fonts)
|
||||||
|
- **FFmpeg 8.1** — финальная обработка, конвертация, оптимизация
|
||||||
|
|
||||||
|
### 4.4 Quality Gates (перед рендером)
|
||||||
|
|
||||||
|
- [ ] `npx hyperframes lint` — 0 ошибок
|
||||||
|
- [ ] `npx hyperframes validate` — 0 console errors
|
||||||
|
- [ ] `npx hyperframes inspect` — 0 errors (warnings acceptable)
|
||||||
|
- [ ] `npx hyperframes snapshot --at <midpoints>` — визуальная проверка
|
||||||
|
- [ ] Текст в safe zone (не перекрывается UI)
|
||||||
|
- [ ] Контраст текста ≥ 4.5:1 (WCAG AA)
|
||||||
|
- [ ] Нет `display`/`visibility` в анимациях
|
||||||
|
- [ ] Все `data-composition-id` уникальны
|
||||||
|
- [ ] Все clip-элементы имеют `class="clip"`
|
||||||
|
|
||||||
|
### 4.5 Экспорт для платформ
|
||||||
|
|
||||||
|
| Платформа | Требования |
|
||||||
|
|-----------|-----------|
|
||||||
|
| Instagram Stories | 1080×1920, MP4, ≤30s, ≤4GB |
|
||||||
|
| WhatsApp Status | 1080×1920, MP4/H.264, ≤16MB, ≤30s |
|
||||||
|
| Telegram Stories | 1080×1920, MP4, ≤10MB, ≤60s |
|
||||||
|
| VK Клипы | 1080×1920, MP4, ≤5 мин |
|
||||||
|
|
||||||
|
**Оптимизация для WhatsApp** (самый ограничивающий):
|
||||||
|
- Размер файла: ≤16MB
|
||||||
|
- Х264 baseline, ≤30fps
|
||||||
|
- Аудио: AAC, ≤128kbps
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. СЛОВАРЬ ПРОДУКТОВ (для использования в роликах)
|
||||||
|
|
||||||
|
### ROI24
|
||||||
|
- **Одно предложение:** Платформа автоматизации маркетинга на 7 площадках с AI-генерацией контента и чат-ботами
|
||||||
|
- **Цифры:** 10 000+ пользователей (рынок), ROI 3–5×
|
||||||
|
- **Ключевые фичи:** AI-контент, чат-боты, рассылки, парсинг ВК, упаковка Avito/YouTube
|
||||||
|
- **Конкурентное преимущество:** Все инструменты в одной платформе, не разрозненные сервисы
|
||||||
|
|
||||||
|
### Call24
|
||||||
|
- **Одно предложение:** AI-аналитика звонков: понимает каждый разговор, улучшает каждый вызов
|
||||||
|
- **Цифры:** 100% звонков анализируются, не выборка
|
||||||
|
- **Ключевые фичи:** Распознавание намерений, оценка менеджеров, инсайты для роста продаж
|
||||||
|
- **Конкурентное преимущество:** Встроен в CRM, реальный time, не "замер"
|
||||||
|
|
||||||
|
### 152-fz checker
|
||||||
|
- **Одно предложение:** Проверка сайта и процессов на соответствие 152-ФЗ за секунды, а не за сотни тысяч
|
||||||
|
- **Цифры:** Штрафы до 6M ₽, проверка за 5 секунд
|
||||||
|
- **Ключевые фичи:** Автосканирование, чек-лист соответствия, отчёт для регулятора
|
||||||
|
- **Конкурентное преимущество:** Автоматизация того, что раньше делали юристы за 500K ₽
|
||||||
|
|
||||||
|
### Локальный AI
|
||||||
|
- **Одно предложение:** Развёртывание LLM на своём железе. Данные не уходят в облако.
|
||||||
|
- **Цифры:** Qwen3.6-35B-A3B, 2×RTX 3080 Ti, ~140 tok/s
|
||||||
|
- **Ключевые фичи:** Полная изоляция данных, API совместимый с OpenAI, без подписок
|
||||||
|
- **Конкурентное преимущество:** Готовая инфраструктура, не "консультация как настроить"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. БЛОК-ПЛАНЫ РОЛИКОВ (шаблоны)
|
||||||
|
|
||||||
|
### Template A: Pain → Agitate → Solve (15s)
|
||||||
|
```
|
||||||
|
0–2s: HOOK — Шокирующий факт или вопрос
|
||||||
|
2–7s: PAIN — Проблема, с которой узнаёт зритель
|
||||||
|
7–12s: SOLUTION — Ваш продукт как ответ (кратко)
|
||||||
|
12–15s: CTA — Ссылка в шапке профиля / "Проверь бесплатно"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Template B: How It Works (20s)
|
||||||
|
```
|
||||||
|
0–3s: HOOK — "Как [продукт] решает [проблему]"
|
||||||
|
3–10s: 3 шага (визуализация процесса)
|
||||||
|
10–17s: Результат (конкретная цифра/выгода)
|
||||||
|
17–20s: CTA
|
||||||
|
```
|
||||||
|
|
||||||
|
### Template C: Comparison (15s)
|
||||||
|
```
|
||||||
|
0–2s: HOOK — "До / После"
|
||||||
|
2–8s: BEFORE — как было (рутина, потери, ошибки)
|
||||||
|
8–13s: AFTER — как стало (автоматизация, контроль, рост)
|
||||||
|
13–15s: CTA
|
||||||
|
```
|
||||||
|
|
||||||
|
### Template D: Number Fact (10s)
|
||||||
|
```
|
||||||
|
0–3s: HOOK — Крупная цифра + вопрос
|
||||||
|
3–8s: Контекст (что значит эта цифра)
|
||||||
|
8–10s: CTA
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. ПРАВИЛА ПРОИЗВОДСТВА
|
||||||
|
|
||||||
|
### 7.1 Приоритеты контента
|
||||||
|
|
||||||
|
1. **Текст > Анимация** — если анимация мешает прочитать, убери анимацию
|
||||||
|
2. **Цифры > Прилагательные** — "−40% затрат" лучше "значительно снижает"
|
||||||
|
3. **Конкретика > Общие фразы** — "152-ФЗ, штраф до 6M ₽" лучше "соблюдай закон"
|
||||||
|
4. **Одна мысль = один ролик** — не смешивай ROI24 и Call24 в одном кадре
|
||||||
|
5. **CTA всегда видим** — кнопка/призыв в нижней safe zone, не перекрывается
|
||||||
|
|
||||||
|
### 7.2 Запреты
|
||||||
|
|
||||||
|
- ❌ Бесконечные анимации (`repeat: -1`, `yoyo` без явного конца)
|
||||||
|
- ❌ `display: none/block` в анимациях (ломает seekability)
|
||||||
|
- ❌ Текст за пределами safe zone
|
||||||
|
- ❌ Шрифты меньше 36px для основного текста
|
||||||
|
- ❌ Градиенты с контрастом < 3:1
|
||||||
|
- ❌ Больше 2 анимаций одновременно на сцене
|
||||||
|
- ❌ Использование `Math.random()` на рендере
|
||||||
|
- ❌ Сетевые запросы из композиции
|
||||||
|
|
||||||
|
### 7.3 Процесс создания
|
||||||
|
|
||||||
|
```
|
||||||
|
1. Выбор рубрики из §2.1
|
||||||
|
2. Написание сценария по §2.3
|
||||||
|
3. Проверка по чек-листу §4.4
|
||||||
|
4. Рендер в draft (npx hyperframes render --quality draft)
|
||||||
|
5. Просмотр → правки → повтор
|
||||||
|
6. Рендер в final (npx hyperframes render --quality high)
|
||||||
|
7. Оптимизация для каждой платформы (размер файла)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. БЮДЖЕТ И РЕСУРСЫ
|
||||||
|
|
||||||
|
### 8.1 Что уже есть
|
||||||
|
- ✅ HyperFrames v0.7.33 (рендер)
|
||||||
|
- ✅ FFmpeg 8.1 (обработка)
|
||||||
|
- ✅ Node.js 20 (среды выполнения)
|
||||||
|
- ✅ AMD Ryzen 7 7700X / 90GB RAM (производительность)
|
||||||
|
- ✅ Дизайн-система (Bauhaus+Apple, Inter)
|
||||||
|
- ✅ 4 готовых продукта для рекламы
|
||||||
|
|
||||||
|
### 8.2 Что нужно для production
|
||||||
|
- [ ] Логотипы продуктов (SVG, прозрачный фон)
|
||||||
|
- [ ] Favicon/brand mark (для watermark)
|
||||||
|
- [ ] TTS-голос (если нужен нарратив)
|
||||||
|
- [ ] Framerate: 30fps (достаточно для motion design, не 60fps)
|
||||||
|
- [ ] Базовые звуковые эффекты (SFX) для переходов (опционально)
|
||||||
|
|
||||||
|
### 8.3 Rerender budget
|
||||||
|
- ~15s ролик: 30–90 секунд локального рендера
|
||||||
|
- ~5–10 секунд на кадр (30fps → 450 кадров)
|
||||||
|
- Тестовый рендер → правки → финал
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. КРИТЕРИИ УСПЕХА
|
||||||
|
|
||||||
|
### KPI для Stories-роликов
|
||||||
|
|
||||||
|
| Метрика | Target | Измерение |
|
||||||
|
|---------|--------|-----------|
|
||||||
|
| Completion Rate | ≥ 65% | Instagram/Telegram insights |
|
||||||
|
| Swipe Up / Tap Rate | ≥ 3% | Ссылки в шапке профиля |
|
||||||
|
| Profile Visits | +15% / ролик | Insights за 24ч после публикации |
|
||||||
|
| Saves / Shares | ≥ 1% | Показатель viral-коэффициента |
|
||||||
|
| Re-engagement | +10% | Возвраты из Stories в сайт |
|
||||||
|
|
||||||
|
### Quality checklist для каждого ролика
|
||||||
|
|
||||||
|
- [ ] Текст читается на 9:16 без зума
|
||||||
|
- [ ] Цвета соответствуют палитре §3.1
|
||||||
|
- [ ] Анимации ≤ 3 одновременных
|
||||||
|
- [ ] CTA виден ≥ 3 секунды
|
||||||
|
- [ ] Файл ≤ 16MB (WhatsApp constraint)
|
||||||
|
- [ ] Safe zone соблюдена
|
||||||
|
- [ ] Нет орфографических ошибок
|
||||||
|
- [ ] Ролик имеет ONE чёткое послание
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. ИСТОРИЯ ВЕРСИЙ
|
||||||
|
|
||||||
|
| Версия | Дата | Изменения | Автор |
|
||||||
|
|--------|------|-----------|-------|
|
||||||
|
| v1.0 | 2026-07-05 | Initial — полный фреймворк | Architect |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Этот документ — living document. Обновляй по мере появления новых продуктов, insights и данных.*
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 640 B |
@@ -0,0 +1,384 @@
|
|||||||
|
# 🎨 Creative Direction — Stories Series
|
||||||
|
|
||||||
|
> **Статус:** Foundation v1.0 (2026-07-05)
|
||||||
|
> **Проект:** Серия рекламных Stories-роликов (WhatsApp / Instagram / Telegram / VK)
|
||||||
|
> **Формат:** Вертикальное видео 1080×1920 (9:16)
|
||||||
|
> **Стиль:** Bauhaus + Apple Fusion — минимализм, функциональность, технологичность
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. BRAND DNA
|
||||||
|
|
||||||
|
### 1.1 Архетип бренда: The Architect / The Sage
|
||||||
|
|
||||||
|
> Строим системы. Не продаём услуги.
|
||||||
|
> Наш бренд — это инженерная точность, структурная ясность, технологическая глубина.
|
||||||
|
|
||||||
|
**Характер:**
|
||||||
|
- Уверенный, но не хвастливый
|
||||||
|
- Говорит фактами, не эмоциями
|
||||||
|
- Решения, не обещания
|
||||||
|
- Прозрачность > мистификация
|
||||||
|
|
||||||
|
**Не:**
|
||||||
|
- Не "креативное агентство"
|
||||||
|
- Не "инновационные AI-решения"
|
||||||
|
- Не "трансформируем ваш бизнес"
|
||||||
|
- Не клише, не buzzwords
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. VISUAL IDENTITY
|
||||||
|
|
||||||
|
### 2.1 Цветовая система
|
||||||
|
|
||||||
|
| Роль | Hex | Usage |
|
||||||
|
|------|-----|-------|
|
||||||
|
| **Canvas** | `#050508` | Фон (deep space black) |
|
||||||
|
| **Surface** | `#0D0D14` | Карточки, панели |
|
||||||
|
| **Ink** | `#FFFFFF` | Основной текст |
|
||||||
|
| **Ink-muted** | `rgba(255,255,255,0.55)` | Вторичный текст |
|
||||||
|
| **Accent-primary** | `#0F62FE` | IBM Carbon B2 — CTA, акценты |
|
||||||
|
| **Accent-cyan** | `#00B8D4` | AI/tech elements |
|
||||||
|
| **Accent-purple** | `#8A2BE2` | Инновации, градиенты |
|
||||||
|
| **Warning** | `#E34850` | Pain-элементы, штрафы, ошибки |
|
||||||
|
| **Success** | `#18A55A` | Результаты, решения, метрики |
|
||||||
|
| **Divider** | `rgba(255,255,255,0.08)` | Линии, разделители |
|
||||||
|
|
||||||
|
**AI Gradient (для AI-продуктов):**
|
||||||
|
```
|
||||||
|
linear-gradient(135deg, #00B8D4 0%, #8A2BE2 50%, #0F62FE 100%)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Gradient Warm (для ROI/money-контента):**
|
||||||
|
```
|
||||||
|
linear-gradient(135deg, #18A55A 0%, #0F62FE 100%)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.2 Типографика
|
||||||
|
|
||||||
|
| Элемент | Шрифт | Вес | Размер | Tracking |
|
||||||
|
|---------|-------|-----|--------|----------|
|
||||||
|
| Hero Text | Inter | 900 (Black) | 110px | -0.03em |
|
||||||
|
| Headline | Inter | 800 | 68px | -0.02em |
|
||||||
|
| Subheadline | Inter | 700 (Bold) | 48px | -0.01em |
|
||||||
|
| Body | Inter | 500 (Medium) | 40px | 0 |
|
||||||
|
| Monospace (data) | JetBrains Mono | 400 | 32px | -0.02em |
|
||||||
|
| CTA Button | Inter | 800 | 52px | 0.05em uppercase |
|
||||||
|
| Small label | Inter | 600 | 28px | 0.08em uppercase |
|
||||||
|
|
||||||
|
### 2.3 Компоновка кадра (1080×1920)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────┐
|
||||||
|
│ ▄▄▄▄ SAFE ZONE 280px │ ← Не трогать (WhatsApp/IG UI overlay)
|
||||||
|
│ [Logo / Brand mark] │
|
||||||
|
│ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │
|
||||||
|
│ │ HOOK TEXT │ │ ← Hero 110px
|
||||||
|
│ │ (макс 2 │ │ Центр-верх
|
||||||
|
│ │ строки) │ │
|
||||||
|
│ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │
|
||||||
|
│ │ BODY TEXT │ │ ← Pain/Solution 40-48px
|
||||||
|
│ │ (макс 3 │ │ Центр
|
||||||
|
│ │ строки) │ │
|
||||||
|
│ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ │
|
||||||
|
│ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ │ ← Не трогать (IG/Telegram UI)
|
||||||
|
│ [CTA Button] [Link] │ Низ 1240-1920px
|
||||||
|
└──────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Safe area:** Y=280px → Y=1540px (доступно 1260px высоты для контента)
|
||||||
|
|
||||||
|
### 2.4 Элементы дизайна
|
||||||
|
|
||||||
|
**Карточки данных:**
|
||||||
|
- Фон: `rgba(255,255,255,0.04)`
|
||||||
|
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||||
|
- Border-radius: `16px`
|
||||||
|
- Padding: `40px`
|
||||||
|
|
||||||
|
**Графические маркеры:**
|
||||||
|
- Тонкие линии (1px `rgba(255,255,255,0.15)`)
|
||||||
|
- Точки/индикаторы (6px circles)
|
||||||
|
- Горизонтальные акцент-линии (2px accent)
|
||||||
|
|
||||||
|
**Декоративные элементы:**
|
||||||
|
- Минимальные сетки/линии на фоне (опционально)
|
||||||
|
- Градиентные блобы на заднем плане (opacity 0.03–0.06)
|
||||||
|
- Без текстур, без шумов, без паттернов
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. MOTION DESIGN
|
||||||
|
|
||||||
|
### 3.1 Анимационные принципы
|
||||||
|
|
||||||
|
1. **Функция > Форма** — каждая анимация должна помогать понимать контент
|
||||||
|
2. **Меньше = больше** — не более 2 одновременных анимаций на сцене
|
||||||
|
3. **Физика реального мира** — ease-in-out, инерция, вес
|
||||||
|
4. **Последовательность** — элементы появляются строго по таймлайну
|
||||||
|
5. **Читаемость > Красота** — если анимация мешает прочитать, убери анимацию
|
||||||
|
|
||||||
|
### 3.2 Библиотека анимаций
|
||||||
|
|
||||||
|
| Имя | Тип | Вход | Выход | Длительность | Easing |
|
||||||
|
|-----|-----|------|-------|-------------|--------|
|
||||||
|
| `fade-up` | Entrance | `opacity:0, y:60` | `opacity:1, y:0` | 0.6s | `power3.out` |
|
||||||
|
| `scale-up` | Entrance | `opacity:0, scale:0.8` | `opacity:1, scale:1` | 0.7s | `back.out(1.7)` |
|
||||||
|
| `slide-left` | Entrance | `opacity:0, x:80` | `opacity:1, x:0` | 0.5s | `power3.out` |
|
||||||
|
| `fade-in` | Entrance | `opacity:0` | `opacity:1` | 0.4s | `power2.out` |
|
||||||
|
| `count-up` | Entrance | `value:0` | `value:N` | 1.2s | `power2.inOut` |
|
||||||
|
| `pulse` | Hold | — | scale 1.0→1.05→1.0 | 0.8s | `sine.inOut` yoyo×2 |
|
||||||
|
| `wipe-out` | Exit | — | `opacity:0, y:-30` | 0.25s | `power2.in` |
|
||||||
|
|
||||||
|
### 3.3 Timing rules
|
||||||
|
|
||||||
|
- **Hook entrance:** 0.3s delay от начала сцены
|
||||||
|
- **Body entrance:** stagger +0.15s относительно предыдущего элемента
|
||||||
|
- **Scene transition:** crossfade 0.15s (предыдущая сцена уходит, новая появляется)
|
||||||
|
- **CTA hold:** минимум 2 секунды видимости
|
||||||
|
- **Total scene duration:** 3–5s (hook), 4–6s (solution), 3–4s (CTA)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. CONTENT FRAMEWORK
|
||||||
|
|
||||||
|
### 4.1 Рубрикатор (контентные категории)
|
||||||
|
|
||||||
|
| Категория | Цель | Формула | Частота |
|
||||||
|
|-----------|------|---------|---------|
|
||||||
|
| 🔥 **Pain** | Попасть в боль | Факт/цифра/вопрос → узнавание | 40% |
|
||||||
|
| 💡 **Solution** | Показать продукт | Проблема → решение → выгода | 30% |
|
||||||
|
| 📊 **Proof** | Доверие | Цифра кейса → социальное доказательство | 15% |
|
||||||
|
| ⚡ **Quick Win** | Польза | Лайфхак/инсайт за 10s | 10% |
|
||||||
|
| 🎯 **Brand** | Позиционирование | Философия, миссия, видение | 5% |
|
||||||
|
|
||||||
|
### 4.2 Формула ролика (15s standard)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌────────────────────────────────────────────────┐
|
||||||
|
│ 0–2s HOOK │ Цепляющий вопрос или факт │ ← Остановка скролла
|
||||||
|
│ 2–7s PAIN │ Проблема, которую узнаёт ЦА │ ← Эмоциональный крючок
|
||||||
|
│ 7–12s SOLUTION │ Продукт как ответ │ ← Рациональное решение
|
||||||
|
│ 12–15s CTA │ Конкретное действие │ ← Что делать дальше
|
||||||
|
└────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Правило 3-х секунд:** Если до 3-й секунды нет HOOK — ролик провалился.
|
||||||
|
|
||||||
|
### 4.3 Template-система
|
||||||
|
|
||||||
|
**Template A — Pain/Agitate/Solve (15s)**
|
||||||
|
- Hook: Шокирующий факт/вопрос
|
||||||
|
- Pain: Проблема × контекст
|
||||||
|
- Solution: Продукт → выгода
|
||||||
|
- CTA: Действие
|
||||||
|
|
||||||
|
**Template B — How It Works (20s)**
|
||||||
|
- Hook: "Как [X] решает [Y]"
|
||||||
|
- Steps: 3 визуальных шага
|
||||||
|
- Result: Конкретная метрика
|
||||||
|
- CTA: Ссылка
|
||||||
|
|
||||||
|
**Template C — Before/After (15s)**
|
||||||
|
- Hook: "До / После"
|
||||||
|
- Before: Ручная рутина, потери
|
||||||
|
- After: Автоматизация, результат
|
||||||
|
- CTA: Попробуй
|
||||||
|
|
||||||
|
**Template D — Number Fact (10s)**
|
||||||
|
- Hook: Крупная цифра
|
||||||
|
- Context: Что она значит
|
||||||
|
- CTA: Узнай больше
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. PRODUCT MESSAGING
|
||||||
|
|
||||||
|
### 5.1 ROI24 — Автоматизация маркетинга
|
||||||
|
|
||||||
|
| Элемент | Текст |
|
||||||
|
|---------|-------|
|
||||||
|
| **Одно предложение** | Платформа автоматизации маркетинга на 7 площадках с AI-генерацией |
|
||||||
|
| **Hook (pain)** | "Сколько лидов утекает пока вы спите?" |
|
||||||
|
| **Solution** | "AI-боты обрабатывают лиды 24/7. Вы — только закрываете сделки." |
|
||||||
|
| **Proof** | "10 000+ компаний уже автоматизировали" |
|
||||||
|
| **CTA** | "Попробуй бесплатно →" |
|
||||||
|
|
||||||
|
### 5.2 Call24 — AI-аналитика звонков
|
||||||
|
|
||||||
|
| Элемент | Текст |
|
||||||
|
|---------|-------|
|
||||||
|
| **Одно предложение** | Каждый звонок — аналитика. Не мнение. |
|
||||||
|
| **Hook (pain)** | "Ваш менеджер врёт. И вы это знаете." |
|
||||||
|
| **Solution** | "AI анализирует 100% звонков. Реальные инсайты для роста продаж." |
|
||||||
|
| **Proof** | "Средний рост конверсии +34% после внедрения" |
|
||||||
|
| **CTA** | "Слушай демо →" |
|
||||||
|
|
||||||
|
### 5.3 152-fz Checker
|
||||||
|
|
||||||
|
| Элемент | Текст |
|
||||||
|
|---------|-------|
|
||||||
|
| **Одно предложение** | Проверка сайта на 152-ФЗ за 5 секунд. Не за 500K ₽. |
|
||||||
|
| **Hook (pain)** | "Штраф за 152-ФЗ: до 6 000 000 ₽ за один сайт" |
|
||||||
|
| **Solution** | "Автосканирование за 5 секунд. Полный чек-лист соответствия." |
|
||||||
|
| **Proof** | "500+ проверок в день. 0 пропущенных нарушений." |
|
||||||
|
| **CTA** | "Проверь свой сайт →" |
|
||||||
|
|
||||||
|
### 5.4 Локальный AI
|
||||||
|
|
||||||
|
| Элемент | Текст |
|
||||||
|
|---------|-------|
|
||||||
|
| **Одно предложение** | LLM на своём сервере. Данные не уходят в облако. |
|
||||||
|
| **Hook (pain)** | "Облачный ИИ — это данные третьей стороны." |
|
||||||
|
| **Solution** | "Qwen3.6 на своём железе. Полный контроль. API совместим с OpenAI." |
|
||||||
|
| **Proof** | "2×RTX 3080 Ti · 140 tok/s · Без подписок" |
|
||||||
|
| **CTA** | "Собери свой AI-кластер →" |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. AUDIO STRATEGY
|
||||||
|
|
||||||
|
### 6.1 Звуковой дизайн
|
||||||
|
|
||||||
|
**Голос (TTS):**
|
||||||
|
- Если нарратив нужен: мужской, спокойный, уверенный тембр
|
||||||
|
- Скорость: 1.1× (чуть быстрее естественного — удерживает внимание)
|
||||||
|
- Акцент: нейтральный российский
|
||||||
|
|
||||||
|
**Музыка (BGM):**
|
||||||
|
- Mood: технологичный, минималистичный, не отвлекающий
|
||||||
|
- BPM: 90–110 (спокойный, не агрессивный)
|
||||||
|
- Инструменты: синтезаторы, ambient pads, минимальный beat
|
||||||
|
- Volume: -20dB относительно голоса (фон, не доминанта)
|
||||||
|
|
||||||
|
**SFX (звуковые эффекты):**
|
||||||
|
- Transition whoosh: мягкий, короткий (0.15s)
|
||||||
|
- Click/tap: для появления элементов (0.08s)
|
||||||
|
- Subtle bass drop: для акцентных моментов (1.2s)
|
||||||
|
|
||||||
|
### 6.2 Правила аудио
|
||||||
|
|
||||||
|
1. 85% Stories смотрятся БЕЗ звука → текст на экране обязателен
|
||||||
|
2. Если есть нарратив — дублировать субтитрами
|
||||||
|
3. Без звука ролик должен быть ПОЛНОСТЬЮ понятен
|
||||||
|
4. Музыка не должна перекрывать голос (sidechain compression)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. PRODUCTION PIPELINE
|
||||||
|
|
||||||
|
### 7.1 Процесс создания ролика
|
||||||
|
|
||||||
|
```
|
||||||
|
1. BRIEF → Выбрать рубрику + продукт + template
|
||||||
|
2. SCRIPT → Написать текст по формуле (Hook/Pain/Solution/CTA)
|
||||||
|
3. STORYBOARD → Описать визуал каждого кадра
|
||||||
|
4. FRAME DESIGN → Создать HTML-композицию в HyperFrames
|
||||||
|
5. ANIMATION → Настроить GSAP timeline
|
||||||
|
6. VALIDATE → lint → validate → inspect → snapshot
|
||||||
|
7. DRAFT RENDER → npx hyperframes render --quality draft
|
||||||
|
8. REVIEW → Просмотр, правки, итерации
|
||||||
|
9. FINAL RENDER → npx hyperframes render --quality high
|
||||||
|
10. OPTIMIZE → Оптимизация под платформы (размер, битрейт)
|
||||||
|
11. PUBLISH → Загрузка на платформы
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.2 Quality Gates
|
||||||
|
|
||||||
|
- [ ] `npx hyperframes lint` — 0 ошибок
|
||||||
|
- [ ] `npx hyperframes validate` — 0 console errors
|
||||||
|
- [ ] `npx hyperframes inspect` — 0 errors
|
||||||
|
- [ ] `npx hyperframes snapshot` — текст в safe zone
|
||||||
|
- [ ] Контраст текста ≥ 4.5:1
|
||||||
|
- [ ] Текст читаем при просмотре на телефоне (не меньше 36px)
|
||||||
|
- [ ] Нет ошибок в текстах (орфография, цифры, факты)
|
||||||
|
- [ ] CTA виден ≥ 2 секунды
|
||||||
|
|
||||||
|
### 7.3 Оптимизация для платформ
|
||||||
|
|
||||||
|
| Платформа | Max size | Bitrate | Codec |
|
||||||
|
|-----------|----------|---------|-------|
|
||||||
|
| Instagram Stories | 30s / 4GB | 8–12 Mbps | H.264 |
|
||||||
|
| WhatsApp Status | 16 MB | 6–8 Mbps | H.264 baseline |
|
||||||
|
| Telegram Stories | 10 MB | 6–8 Mbps | H.264 |
|
||||||
|
| VK Клипы | 5 min | 10–15 Mbps | H.264 |
|
||||||
|
|
||||||
|
**WhatsApp constraint** (самый ограничивающий): 16MB, ≤30s. Целимся ≤10MB для запаса.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. CONTENT CALENDAR (План серии)
|
||||||
|
|
||||||
|
### Wave 1: Foundation (неделя 1–2)
|
||||||
|
| # | Продукт | Рубрика | Template | Цель |
|
||||||
|
|---|---------|---------|----------|------|
|
||||||
|
| 1 | ROI24 | Pain | A | Остановка скролла фактом |
|
||||||
|
| 2 | Call24 | Pain | A | Эмоциональный hook |
|
||||||
|
| 3 | 152-fz | Pain | D | Шоковая цифра |
|
||||||
|
| 4 | Local AI | Brand | B | Позиционирование |
|
||||||
|
| 5 | All | Solution | A | Общий охват |
|
||||||
|
|
||||||
|
### Wave 2: Proof (неделя 3–4)
|
||||||
|
| # | Продукт | Рубрика | Template | Цель |
|
||||||
|
|---|---------|---------|----------|------|
|
||||||
|
| 6 | ROI24 | Proof | C | Социальное доказательство |
|
||||||
|
| 7 | Call24 | Solution | B | Как это работает |
|
||||||
|
| 8 | 152-fz | Solution | A | Простота использования |
|
||||||
|
| 9 | Local AI | Proof | D | Технические метрики |
|
||||||
|
| 10 | All | Quick Win | D | Быстрая польза |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. DESIGN TOKENS (для повторного использования)
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# Colors
|
||||||
|
canvas: "#050508"
|
||||||
|
surface: "#0D0D14"
|
||||||
|
ink: "#FFFFFF"
|
||||||
|
ink-muted: "rgba(255,255,255,0.55)"
|
||||||
|
accent-primary: "#0F62FE"
|
||||||
|
accent-cyan: "#00B8D4"
|
||||||
|
accent-purple: "#8A2BE2"
|
||||||
|
warning: "#E34850"
|
||||||
|
success: "#18A55A"
|
||||||
|
divider: "rgba(255,255,255,0.08)"
|
||||||
|
|
||||||
|
# Gradients
|
||||||
|
ai-gradient: "linear-gradient(135deg, #00B8D4, #8A2BE2, #0F62FE)"
|
||||||
|
warm-gradient: "linear-gradient(135deg, #18A55A, #0F62FE)"
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
font-primary: "Inter"
|
||||||
|
font-mono: "JetBrains Mono"
|
||||||
|
hero-size: "110px"
|
||||||
|
headline-size: "68px"
|
||||||
|
body-size: "40px"
|
||||||
|
small-size: "28px"
|
||||||
|
|
||||||
|
# Layout
|
||||||
|
safe-top: "280px"
|
||||||
|
safe-bottom: "380px"
|
||||||
|
content-height: "1260px"
|
||||||
|
card-radius: "16px"
|
||||||
|
card-padding: "40px"
|
||||||
|
|
||||||
|
# Animation
|
||||||
|
ease-out: "power3.out"
|
||||||
|
ease-in: "power2.in"
|
||||||
|
ease-back: "back.out(1.7)"
|
||||||
|
ease-sine: "sine.inOut"
|
||||||
|
transition-duration: "0.6s"
|
||||||
|
stagger: "0.15s"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Creative Direction Foundation — living document. Обновляется по мере разработки роликов и получения данных о вовлечённости.*
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
# Design System — Interesting Theme
|
||||||
|
|
||||||
|
> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
|
||||||
|
> **Дата анализа:** 2026-07-05
|
||||||
|
> **Компонентов:** 427 | **Цветов:** 10 | **Шрифтов:** 614 instances
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. CANVAS
|
||||||
|
|
||||||
|
| Параметр | Значение |
|
||||||
|
|----------|----------|
|
||||||
|
| Width | 1080px |
|
||||||
|
| Height | 1920px |
|
||||||
|
| Aspect Ratio | 9:16 (Stories) |
|
||||||
|
| Background | `#000000` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. COLORS
|
||||||
|
|
||||||
|
### Palette
|
||||||
|
|
||||||
|
| Token | Hex | Usage |
|
||||||
|
|-------|-----|-------|
|
||||||
|
| `--color-bg` | `#000000` | Фон |
|
||||||
|
| `--color-surface` | `#e7f7f7` | Поверхность |
|
||||||
|
| `--color-surface-light` | `#ecf9f9` | Поверхность 2 |
|
||||||
|
| `--color-purple` | `#867de5` | Акцент 1 |
|
||||||
|
| `--color-purple-dark` | `#5d26be` | Акцент 2 |
|
||||||
|
| `--color-pink` | `#ff6fcc` | Акцент 3 |
|
||||||
|
| `--color-yellow` | `#e6ff6f` | Акцент 4 |
|
||||||
|
| `--color-text` | `#ffffff` | Текст |
|
||||||
|
| `--color-text-muted` | `#d9d9d9` | Текст 2 |
|
||||||
|
| `--color-ink` | `#010101` | Текст 3 |
|
||||||
|
|
||||||
|
### Gradients
|
||||||
|
|
||||||
|
| Token | Definition |
|
||||||
|
|-------|------------|
|
||||||
|
| `--gradient-primary` | `linear-gradient(135deg, #867de5, #ff6fcc)` |
|
||||||
|
| `--gradient-secondary` | `linear-gradient(135deg, #5d26be, #e6ff6f)` |
|
||||||
|
| `--gradient-accent` | `linear-gradient(90deg, #ff6fcc, #e6ff6f)` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. TYPOGRAPHY
|
||||||
|
|
||||||
|
### Fonts
|
||||||
|
|
||||||
|
| Font | Weights | Instances |
|
||||||
|
|------|---------|-----------|
|
||||||
|
| Sora | 100, 200, 300 | 584 |
|
||||||
|
| Inter | 400 | 30 |
|
||||||
|
|
||||||
|
### Scale
|
||||||
|
|
||||||
|
| Element | Size | Weight | Usage |
|
||||||
|
|---------|------|--------|-------|
|
||||||
|
| H1 | 96px | 300 | Hero |
|
||||||
|
| H2 | 64px | 300 | Заголовок |
|
||||||
|
| H3 | 48px | 200 | Подзаголовок |
|
||||||
|
| H4 | 32px | 200 | Карточка |
|
||||||
|
| Body | 20px | 100 | Текст |
|
||||||
|
| Caption | 16px | 100 | Мелкий |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. COMPONENTS (427 from Figma)
|
||||||
|
|
||||||
|
### Card Patterns
|
||||||
|
|
||||||
|
| Type | Size | Count |
|
||||||
|
|------|------|-------|
|
||||||
|
| Hero | 1920×1080 | 40 |
|
||||||
|
| Card Large | 557×611 | 3 |
|
||||||
|
| Card Medium | 538×433 | 2 |
|
||||||
|
| Card Small | 400×210 | 21 |
|
||||||
|
| Button | 400×80 | 21 |
|
||||||
|
| Nav | 1760×161 | 4 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. CSS VARIABLES
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-surface: #e7f7f7;
|
||||||
|
--color-surface-light: #ecf9f9;
|
||||||
|
--color-purple: #867de5;
|
||||||
|
--color-purple-dark: #5d26be;
|
||||||
|
--color-pink: #ff6fcc;
|
||||||
|
--color-yellow: #e6ff6f;
|
||||||
|
--color-text: #ffffff;
|
||||||
|
--color-text-muted: #d9d9d9;
|
||||||
|
--color-ink: #010101;
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-yellow));
|
||||||
|
--gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-primary: 'Sora', -apple-system, sans-serif;
|
||||||
|
--font-weight-light: 200;
|
||||||
|
--font-weight-thin: 100;
|
||||||
|
--font-weight-regular: 300;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Generated from Figma • Figma to HyperFrames v1.0*
|
||||||
+1264
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,67 @@
|
|||||||
|
# Frame — Composition (1080×1920)
|
||||||
|
|
||||||
|
> **Статус:** Auto-generated from Figma
|
||||||
|
> **Исходные фреймы:** 303
|
||||||
|
> **Целевой размер:** 1080×1920 (9:16 Stories)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. CANVAS
|
||||||
|
|
||||||
|
| Параметр | Значение |
|
||||||
|
|----------|----------|
|
||||||
|
| Width | 1080px |
|
||||||
|
| Height | 1920px |
|
||||||
|
| Aspect Ratio | 9:16 |
|
||||||
|
| Background | #050508 |
|
||||||
|
|
||||||
|
## 2. LAYOUT
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────┐ Y=0
|
||||||
|
│ SAFE ZONE 280px │ ← Не трогать
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │ ← Hero
|
||||||
|
│ │ │ │
|
||||||
|
│ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │ ← Body
|
||||||
|
│ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ SAFE ZONE 380px │ ← Не трогать
|
||||||
|
└──────────────────────────┘ Y=1920
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. SCENE TEMPLATES
|
||||||
|
|
||||||
|
### Scene 1 — Hook (0–3s)
|
||||||
|
```
|
||||||
|
Hero: 96–110px, bold
|
||||||
|
Emoji/icon: 80px
|
||||||
|
Subtitle: 48px, muted
|
||||||
|
```
|
||||||
|
|
||||||
|
### Scene 2 — Pain (3–8s)
|
||||||
|
```
|
||||||
|
Metric: 120px, warning color
|
||||||
|
Badge: 28px, uppercase
|
||||||
|
Result: 42px
|
||||||
|
```
|
||||||
|
|
||||||
|
### Scene 3 — Solution (8–12s)
|
||||||
|
```
|
||||||
|
Brand: badge
|
||||||
|
Headline: 68px
|
||||||
|
Features: 3 items, left-aligned
|
||||||
|
```
|
||||||
|
|
||||||
|
### Scene 4 — CTA (12–15s)
|
||||||
|
```
|
||||||
|
Button: gradient, scale animation
|
||||||
|
Pre-CTA: 42px
|
||||||
|
Note: 32px mono
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Auto-generated from Figma • Figma to HyperFrames v1.0*
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
|
||||||
|
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
|
||||||
|
"paths": {
|
||||||
|
"blocks": "compositions",
|
||||||
|
"components": "compositions/components",
|
||||||
|
"assets": "assets"
|
||||||
|
}
|
||||||
|
}
|
||||||
+349
@@ -0,0 +1,349 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=1080, height=1920" />
|
||||||
|
<title>ROI24 — Лиды утекают</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
width: 1080px;
|
||||||
|
height: 1920px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #050508;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
position: relative;
|
||||||
|
width: 1080px;
|
||||||
|
height: 1920px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #050508;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Typography === */
|
||||||
|
.hero {
|
||||||
|
font-size: 96px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1.05;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.headline {
|
||||||
|
font-size: 64px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.body-text {
|
||||||
|
font-size: 42px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
.cta-text {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.mono {
|
||||||
|
font-family: "JetBrains Mono", monospace;
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Animation base states === */
|
||||||
|
.fade-up {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(60px);
|
||||||
|
}
|
||||||
|
.fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.scale-up {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Scene container === */
|
||||||
|
.scene {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 280px 80px 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Decorative elements === */
|
||||||
|
.accent-line {
|
||||||
|
width: 80px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, #0F62FE, #00B8D4);
|
||||||
|
border-radius: 2px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse at 50% 30%, rgba(227,72,80,0.12) 0%, transparent 60%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse at 50% 40%, rgba(15,98,254,0.15) 0%, transparent 55%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 32px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.15);
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255,255,255,0.6);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === CTA Button === */
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 28px 60px;
|
||||||
|
background: linear-gradient(135deg, #0F62FE 0%, #00B8D4 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 44px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Metric display === */
|
||||||
|
.metric {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.metric-value {
|
||||||
|
font-size: 120px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
.metric-label {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div
|
||||||
|
id="root"
|
||||||
|
data-composition-id="main"
|
||||||
|
data-start="0"
|
||||||
|
data-duration="15"
|
||||||
|
data-width="1080"
|
||||||
|
data-height="1920"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<!-- SCENE 1: HOOK — "Сколько лидов..." -->
|
||||||
|
<!-- Time: 0–3s -->
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<div class="scene clip" data-start="0" data-duration="3" data-track-index="1">
|
||||||
|
<div class="warning-bg"></div>
|
||||||
|
<div class="fade-up" id="hook-emoji"
|
||||||
|
style="font-size: 80px; margin-bottom: 20px;">📉</div>
|
||||||
|
<div class="fade-up" id="hook-text" style="margin-bottom: 24px;">
|
||||||
|
<span class="hero" style="color: #E34850;">Сколько лидов</span><br/>
|
||||||
|
<span class="hero" style="color: rgba(255,255,255,0.9);">утекает?</span>
|
||||||
|
</div>
|
||||||
|
<div class="fade-up" id="hook-sub" style="margin-top: 16px;">
|
||||||
|
<span class="body-text">Пока вы спите.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<!-- SCENE 2: PAIN — Проблема -->
|
||||||
|
<!-- Time: 3–8s -->
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<div class="scene clip" data-start="3" data-duration="5" data-track-index="2">
|
||||||
|
<div class="warning-bg" id="pain-bg"></div>
|
||||||
|
<div class="brand-badge fade-up" id="pain-badge">Почему так?</div>
|
||||||
|
<div class="fade-up" id="pain-stats" style="margin-top: 48px;">
|
||||||
|
<div class="metric">
|
||||||
|
<span class="metric-value" style="color: #E34850;">73%</span>
|
||||||
|
<span class="metric-label">лидов не обработаны<br/>в первые 30 мин</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fade-up" id="pain-result" style="margin-top: 56px;">
|
||||||
|
<span class="body-text">Каждый необработанный лид —<br/>это <strong style="color: #E34850;">потерянные деньги</strong></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<!-- SCENE 3: SOLUTION — ROI24 -->
|
||||||
|
<!-- Time: 8–12s -->
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<div class="scene clip" data-start="8" data-duration="4" data-track-index="3">
|
||||||
|
<div class="success-bg" id="solution-bg"></div>
|
||||||
|
<div class="fade-up" id="solution-brand" style="margin-bottom: 16px;">
|
||||||
|
<span class="brand-badge" style="border-color: rgba(15,98,254,0.4); color: #0F62FE;">ROI24</span>
|
||||||
|
</div>
|
||||||
|
<div class="fade-up" id="solution-headline">
|
||||||
|
<span class="headline" style="color: #fff;">AI-автоматизация<br/>маркетинга</span>
|
||||||
|
</div>
|
||||||
|
<div class="fade-up" id="solution-features" style="margin-top: 40px; text-align: left;">
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
||||||
|
<span style="font-size: 36px;">🤖</span>
|
||||||
|
<span class="body-text" style="color: rgba(255,255,255,0.9);">Лиды обрабатываются за 0 сек</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
|
||||||
|
<span style="font-size: 36px;">📱</span>
|
||||||
|
<span class="body-text" style="color: rgba(255,255,255,0.9);">7 площадок, один инструмент</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<span style="font-size: 36px;">📊</span>
|
||||||
|
<span class="body-text" style="color: rgba(255,255,255,0.9);">Сквозная аналитика</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<!-- SCENE 4: CTA — Призыв к действию -->
|
||||||
|
<!-- Time: 12–15s -->
|
||||||
|
<!-- ═══════════════════════════════════════ -->
|
||||||
|
<div class="scene clip" data-start="12" data-duration="3" data-track-index="4">
|
||||||
|
<div class="success-bg" id="cta-bg"></div>
|
||||||
|
<div class="fade-up" id="cta-pre" style="margin-bottom: 20px;">
|
||||||
|
<span class="body-text">Хватит терять клиентов</span>
|
||||||
|
</div>
|
||||||
|
<div class="scale-up" id="cta-button">
|
||||||
|
<span style="color: #fff;">Попробуй бесплатно →</span>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in" id="cta-note" style="margin-top: 24px;">
|
||||||
|
<span class="mono" style="color: rgba(255,255,255,0.4);">ROI24 — Автоматизация без рутины</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
|
||||||
|
// ═══════════ SCENE 1: HOOK (0–3s) ═══════════
|
||||||
|
tl.to("#hook-emoji", {
|
||||||
|
opacity: 1, y: 0, duration: 0.6, ease: "power3.out"
|
||||||
|
}, 0.3);
|
||||||
|
tl.to("#hook-text", {
|
||||||
|
opacity: 1, y: 0, duration: 0.7, ease: "power3.out"
|
||||||
|
}, 0.4);
|
||||||
|
tl.to("#hook-sub", {
|
||||||
|
opacity: 1, y: 0, duration: 0.5, ease: "power2.out"
|
||||||
|
}, 1.0);
|
||||||
|
// Exit
|
||||||
|
tl.to("#hook-emoji, #hook-text, #hook-sub", {
|
||||||
|
opacity: 0, y: -50, duration: 0.25, ease: "power2.in"
|
||||||
|
}, 2.5);
|
||||||
|
tl.set("#hook-emoji, #hook-text, #hook-sub", { opacity: 0, y: -50 }, 3.0);
|
||||||
|
|
||||||
|
// ═══════════ SCENE 2: PAIN (3–8s) ═══════════
|
||||||
|
tl.to("#pain-bg", {
|
||||||
|
opacity: 1, duration: 0.5, ease: "power1.out"
|
||||||
|
}, 3.0);
|
||||||
|
tl.from("#pain-badge", {
|
||||||
|
opacity: 0, y: 40, duration: 0.5, ease: "power3.out"
|
||||||
|
}, 3.2);
|
||||||
|
tl.from("#pain-stats", {
|
||||||
|
opacity: 0, y: 50, duration: 0.7, ease: "power3.out"
|
||||||
|
}, 3.6);
|
||||||
|
tl.from("#pain-result", {
|
||||||
|
opacity: 0, y: 40, duration: 0.5, ease: "power2.out"
|
||||||
|
}, 4.8);
|
||||||
|
// Exit
|
||||||
|
tl.to("#pain-bg", {
|
||||||
|
opacity: 0, duration: 0.2, ease: "power2.in"
|
||||||
|
}, 7.5);
|
||||||
|
tl.to("#pain-badge, #pain-stats, #pain-result", {
|
||||||
|
opacity: 0, y: -40, duration: 0.25, ease: "power2.in"
|
||||||
|
}, 7.5);
|
||||||
|
tl.set("#pain-badge, #pain-stats, #pain-result, #pain-bg", { opacity: 0 }, 8.0);
|
||||||
|
|
||||||
|
// ═══════════ SCENE 3: SOLUTION (8–12s) ═══════════
|
||||||
|
tl.to("#solution-bg", {
|
||||||
|
opacity: 1, duration: 0.6, ease: "power1.out"
|
||||||
|
}, 8.0);
|
||||||
|
tl.from("#solution-brand", {
|
||||||
|
opacity: 0, scale: 0.8, duration: 0.5, ease: "back.out(1.7)"
|
||||||
|
}, 8.2);
|
||||||
|
tl.from("#solution-headline", {
|
||||||
|
opacity: 0, y: 50, duration: 0.7, ease: "power3.out"
|
||||||
|
}, 8.4);
|
||||||
|
tl.from("#solution-features > div:nth-child(1)", {
|
||||||
|
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||||||
|
}, 9.0);
|
||||||
|
tl.from("#solution-features > div:nth-child(2)", {
|
||||||
|
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||||||
|
}, 9.3);
|
||||||
|
tl.from("#solution-features > div:nth-child(3)", {
|
||||||
|
opacity: 0, x: -40, duration: 0.5, ease: "power2.out"
|
||||||
|
}, 9.6);
|
||||||
|
// Exit
|
||||||
|
tl.to("#solution-bg", {
|
||||||
|
opacity: 0, duration: 0.2, ease: "power2.in"
|
||||||
|
}, 11.7);
|
||||||
|
tl.to("#solution-brand, #solution-headline, #solution-features > div", {
|
||||||
|
opacity: 0, y: -30, duration: 0.2, ease: "power2.in"
|
||||||
|
}, 11.7);
|
||||||
|
tl.set("#solution-brand, #solution-headline, #solution-features, #solution-bg", { opacity: 0 }, 12.0);
|
||||||
|
|
||||||
|
// ═══════════ SCENE 4: CTA (12–15s) ═══════════
|
||||||
|
tl.to("#cta-bg", {
|
||||||
|
opacity: 1, duration: 0.5, ease: "power1.out"
|
||||||
|
}, 12.0);
|
||||||
|
tl.from("#cta-pre", {
|
||||||
|
opacity: 0, y: 30, duration: 0.5, ease: "power3.out"
|
||||||
|
}, 12.2);
|
||||||
|
tl.from("#cta-button", {
|
||||||
|
opacity: 0, scale: 0.85, duration: 0.6, ease: "back.out(1.7)"
|
||||||
|
}, 12.6);
|
||||||
|
tl.from("#cta-note", {
|
||||||
|
opacity: 0, duration: 0.4, ease: "power2.out"
|
||||||
|
}, 13.2);
|
||||||
|
// Subtle pulse on CTA button
|
||||||
|
tl.to("#cta-button", {
|
||||||
|
scale: 1.04, duration: 0.7, ease: "sine.inOut", yoyo: true, repeat: 1
|
||||||
|
}, 13.4);
|
||||||
|
// Final hold
|
||||||
|
tl.to("#cta-bg, #cta-pre, #cta-button, #cta-note", {
|
||||||
|
opacity: 1, duration: 0.1
|
||||||
|
}, 14.8);
|
||||||
|
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,164 @@
|
|||||||
|
# Design System — Interesting
|
||||||
|
|
||||||
|
> **Статус:** Live from Figma
|
||||||
|
> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
|
||||||
|
> **Дата анализа:** 2026-07-05
|
||||||
|
> **Файл:** interesting
|
||||||
|
> **Версия:** 2372699282987939162
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. ЦВЕТА (10 unique from Figma)
|
||||||
|
|
||||||
|
### Palette
|
||||||
|
|
||||||
|
| Token | Hex | Usage |
|
||||||
|
|-------|-----|-------|
|
||||||
|
| `--color-primary` | `#ffffff` | Фон, текст |
|
||||||
|
| `--color-bg` | `#000000` | Фон тёмный |
|
||||||
|
| `--color-surface` | `#e7f7f7` | Поверхность светлая |
|
||||||
|
| `--color-purple` | `#867de5` | Фиолетовый основной |
|
||||||
|
| `--color-purple-dark` | `#5d26be` | Фиолетовый тёмный |
|
||||||
|
| `--color-pink` | `#ff6fcc` | Розовый акцент |
|
||||||
|
| `--color-yellow` | `#e6ff6f` | Жёлтый акцент |
|
||||||
|
| `--color-ink` | `#010101` | Чёрный текст |
|
||||||
|
| `--color-gray` | `#d9d9d9` | Серый текст |
|
||||||
|
| `--color-surface-light` | `#ecf9f9` | Поверхность светлая 2 |
|
||||||
|
|
||||||
|
### Gradients
|
||||||
|
|
||||||
|
| Token | Definition |
|
||||||
|
|-------|------------|
|
||||||
|
| `--gradient-primary` | `linear-gradient(135deg, #867de5, #ff6fcc)` |
|
||||||
|
| `--gradient-secondary` | `linear-gradient(135deg, #5d26be, #867de5)` |
|
||||||
|
| `--gradient-accent` | `linear-gradient(90deg, #ff6fcc, #e6ff6f)` |
|
||||||
|
| `--gradient-dark` | `linear-gradient(180deg, #000000, #1a0b2e)` |
|
||||||
|
|
||||||
|
### CSS Variables
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-surface: #e7f7f7;
|
||||||
|
--color-purple: #867de5;
|
||||||
|
--color-purple-dark: #5d26be;
|
||||||
|
--color-pink: #ff6fcc;
|
||||||
|
--color-yellow: #e6ff6f;
|
||||||
|
--color-ink: #010101;
|
||||||
|
--color-gray: #d9d9d9;
|
||||||
|
--color-surface-light: #ecf9f9;
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple));
|
||||||
|
--gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
|
||||||
|
--gradient-dark: linear-gradient(180deg, var(--color-bg), #1a0b2e);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. ТИПОГРАФИКА (614 instances from Figma)
|
||||||
|
|
||||||
|
### Fonts
|
||||||
|
|
||||||
|
| Font | Family | Weights | Instances |
|
||||||
|
|------|--------|---------|-----------|
|
||||||
|
| Sora | `Sora` | 100, 200, 300 | 584 |
|
||||||
|
| Inter | `Inter` | 400 | 30 |
|
||||||
|
|
||||||
|
### Scale
|
||||||
|
|
||||||
|
| Element | Size | Weight | Usage |
|
||||||
|
|---------|------|--------|-------|
|
||||||
|
| H1 | 96px | 300 | Hero заголовок |
|
||||||
|
| H2 | 64px | 300 | Подзаголовок |
|
||||||
|
| H3 | 48px | 300 | Секция |
|
||||||
|
| H4 | 32px | 300 | Карточка |
|
||||||
|
| Body | 20px | 200 | Текст |
|
||||||
|
| Caption | 16px | 200 | Подпись |
|
||||||
|
| Small | 12px | 100 | Мелкий текст |
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-primary: 'Sora', -apple-system, sans-serif;
|
||||||
|
--font-secondary: 'Inter', -apple-system, sans-serif;
|
||||||
|
--font-weight-light: 200;
|
||||||
|
--font-weight-thin: 100;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 300;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. РАЗМЕРЫ (303 frames from Figma)
|
||||||
|
|
||||||
|
### Unique Sizes
|
||||||
|
|
||||||
|
| Size | Count | Usage |
|
||||||
|
|------|-------|-------|
|
||||||
|
| 1920×1080 | 40 | Hero frames |
|
||||||
|
| 400×210 | 21 | Cards |
|
||||||
|
| 400×80 | 21 | Buttons/headers |
|
||||||
|
| 400×90 | 21 | Inputs |
|
||||||
|
| 380×391 | 16 | Cards large |
|
||||||
|
| 380×138 | 16 | Cards medium |
|
||||||
|
| 1760×161 | 4 | Navigation |
|
||||||
|
| 1760×391 | 4 | Hero large |
|
||||||
|
| 1760×677 | 2 | Hero extra |
|
||||||
|
| 1160×640 | 4 | Content |
|
||||||
|
| 1160×320 | 8 | Content small |
|
||||||
|
|
||||||
|
### Component Sizes
|
||||||
|
|
||||||
|
| Component | Width | Height | Count |
|
||||||
|
|-----------|-------|--------|-------|
|
||||||
|
| Hero | 1920px | 1080px | 40 |
|
||||||
|
| Card | 400px | 210px | 21 |
|
||||||
|
| Card Large | 380px | 391px | 16 |
|
||||||
|
| Button | 400px | 80px | 21 |
|
||||||
|
| Input | 400px | 90px | 21 |
|
||||||
|
| Nav | 1760px | 161px | 4 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. CSS VARIABLES (production-ready)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Auto-generated from Figma — Interesting theme */
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-surface: #e7f7f7;
|
||||||
|
--color-purple: #867de5;
|
||||||
|
--color-purple-dark: #5d26be;
|
||||||
|
--color-pink: #ff6fcc;
|
||||||
|
--color-yellow: #e6ff6f;
|
||||||
|
--color-ink: #010101;
|
||||||
|
--color-gray: #d9d9d9;
|
||||||
|
--color-surface-light: #ecf9f9;
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple));
|
||||||
|
--gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
|
||||||
|
--gradient-dark: linear-gradient(180deg, var(--color-bg), #1a0b2e);
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-primary: 'Sora', -apple-system, sans-serif;
|
||||||
|
--font-secondary: 'Inter', -apple-system, sans-serif;
|
||||||
|
--font-weight-light: 200;
|
||||||
|
--font-weight-thin: 100;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 300;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Generated from Figma • Figma to HyperFrames v1.0*
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
# Frame — Interesting Theme (1080×1920)
|
||||||
|
|
||||||
|
> **Статус:** Live from Figma API
|
||||||
|
> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
|
||||||
|
> **Дата анализа:** 2026-07-05
|
||||||
|
> **Файл:** interesting
|
||||||
|
> **Версия:** 2372699282987939162
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. CANVAS
|
||||||
|
|
||||||
|
| Параметр | Значение |
|
||||||
|
|----------|----------|
|
||||||
|
| Width | 1080px |
|
||||||
|
| Height | 1920px |
|
||||||
|
| Aspect Ratio | 9:16 |
|
||||||
|
| Background | #000000 |
|
||||||
|
|
||||||
|
## 2. LAYOUT
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────┐ Y=0
|
||||||
|
│ SAFE ZONE 280px │ ← Не трогать
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │ ← Hero
|
||||||
|
│ │ │ │
|
||||||
|
│ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ │ ← Body
|
||||||
|
│ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ SAFE ZONE 380px │ ← Не трогать
|
||||||
|
└──────────────────────────┘ Y=1920
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. SCENE TEMPLATES
|
||||||
|
|
||||||
|
### Scene 1 — Hook (0–3s)
|
||||||
|
```
|
||||||
|
Hero: 96px, Sora 300
|
||||||
|
Emoji/icon: 80px
|
||||||
|
Subtitle: 48px, muted
|
||||||
|
```
|
||||||
|
|
||||||
|
### Scene 2 — Pain (3–8s)
|
||||||
|
```
|
||||||
|
Metric: 120px, gradient-primary
|
||||||
|
Badge: 28px, uppercase
|
||||||
|
Result: 42px
|
||||||
|
```
|
||||||
|
|
||||||
|
### Scene 3 — Solution (8–12s)
|
||||||
|
```
|
||||||
|
Brand: badge
|
||||||
|
Headline: 68px
|
||||||
|
Features: 3 items, left-aligned
|
||||||
|
```
|
||||||
|
|
||||||
|
### Scene 4 — CTA (12–15s)
|
||||||
|
```
|
||||||
|
Button: gradient-primary, scale animation
|
||||||
|
Pre-CTA: 42px
|
||||||
|
Note: 32px Sora
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Auto-generated from Figma • Figma to HyperFrames v1.0*
|
||||||
@@ -0,0 +1,214 @@
|
|||||||
|
# Style.md — Interesting Theme
|
||||||
|
|
||||||
|
> **Статус:** Live from Figma API
|
||||||
|
> **Источник:** https://www.figma.com/file/H5KJles5GpNiKk1tm9SjWc
|
||||||
|
> **Дата анализа:** 2026-07-05
|
||||||
|
> **Файл:** interesting
|
||||||
|
> **Версия:** 2372699282987939162
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. CANVAS & LAYOUT
|
||||||
|
|
||||||
|
| Token | Value | Source |
|
||||||
|
|-------|-------|--------|
|
||||||
|
| `--canvas-width` | `1080px` | Stories format |
|
||||||
|
| `--canvas-height` | `1920px` | Stories format |
|
||||||
|
| `--canvas-ratio` | `9:16` | Stories format |
|
||||||
|
| `--bg-canvas` | `#000000` | Derived from Figma #000000 |
|
||||||
|
| `--safe-top` | `280px` | WhatsApp/IG UI |
|
||||||
|
| `--safe-bottom` | `380px` | IG/Telegram UI |
|
||||||
|
| `--safe-content` | `Y:280-1540` | 1260px height |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. COLORS (10 unique from Figma)
|
||||||
|
|
||||||
|
### Palette
|
||||||
|
|
||||||
|
| Token | Hex | Usage |
|
||||||
|
|-------|-----|-------|
|
||||||
|
| `--color-primary` | `#ffffff` | Фон, текст |
|
||||||
|
| `--color-bg` | `#000000` | Фон тёмный |
|
||||||
|
| `--color-surface` | `#e7f7f7` | Поверхность светлая |
|
||||||
|
| `--color-purple` | `#867de5` | Фиолетовый основной |
|
||||||
|
| `--color-purple-dark` | `#5d26be` | Фиолетовый тёмный |
|
||||||
|
| `--color-pink` | `#ff6fcc` | Розовый акцент |
|
||||||
|
| `--color-yellow` | `#e6ff6f` | Жёлтый акцент |
|
||||||
|
| `--color-ink` | `#010101` | Чёрный текст |
|
||||||
|
| `--color-gray` | `#d9d9d9` | Серый текст |
|
||||||
|
| `--color-surface-light` | `#ecf9f9` | Поверхность светлая 2 |
|
||||||
|
|
||||||
|
### Gradients
|
||||||
|
|
||||||
|
| Token | Definition |
|
||||||
|
|-------|------------|
|
||||||
|
| `--gradient-primary` | `linear-gradient(135deg, #867de5, #ff6fcc)` |
|
||||||
|
| `--gradient-secondary` | `linear-gradient(135deg, #5d26be, #867de5)` |
|
||||||
|
| `--gradient-accent` | `linear-gradient(90deg, #ff6fcc, #e6ff6f)` |
|
||||||
|
| `--gradient-dark` | `linear-gradient(180deg, #000000, #1a0b2e)` |
|
||||||
|
|
||||||
|
### CSS Variables
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-surface: #e7f7f7;
|
||||||
|
--color-purple: #867de5;
|
||||||
|
--color-purple-dark: #5d26be;
|
||||||
|
--color-pink: #ff6fcc;
|
||||||
|
--color-yellow: #e6ff6f;
|
||||||
|
--color-ink: #010101;
|
||||||
|
--color-gray: #d9d9d9;
|
||||||
|
--color-surface-light: #ecf9f9;
|
||||||
|
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple));
|
||||||
|
--gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
|
||||||
|
--gradient-dark: linear-gradient(180deg, var(--color-bg), #1a0b2e);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. TYPOGRAPHY (614 instances from Figma)
|
||||||
|
|
||||||
|
### Fonts
|
||||||
|
|
||||||
|
| Font | Family | Weights | Instances |
|
||||||
|
|------|--------|---------|-----------|
|
||||||
|
| Sora | `Sora` | 100, 200, 300 | 584 |
|
||||||
|
| Inter | `Inter` | 400 | 30 |
|
||||||
|
|
||||||
|
### Scale
|
||||||
|
|
||||||
|
| Element | Size | Weight | Usage |
|
||||||
|
|---------|------|--------|-------|
|
||||||
|
| H1 | 96px | 300 | Hero заголовок |
|
||||||
|
| H2 | 64px | 300 | Подзаголовок |
|
||||||
|
| H3 | 48px | 300 | Секция |
|
||||||
|
| H4 | 32px | 300 | Карточка |
|
||||||
|
| Body | 20px | 200 | Текст |
|
||||||
|
| Caption | 16px | 200 | Подпись |
|
||||||
|
| Small | 12px | 100 | Мелкий текст |
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-primary: 'Sora', -apple-system, sans-serif;
|
||||||
|
--font-secondary: 'Inter', -apple-system, sans-serif;
|
||||||
|
--font-weight-light: 200;
|
||||||
|
--font-weight-thin: 100;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 300;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. SPACING (derived from Figma frames)
|
||||||
|
|
||||||
|
| Token | Value | Source |
|
||||||
|
|-------|-------|--------|
|
||||||
|
| `--space-1` | `4px` | Micro |
|
||||||
|
| `--space-2` | `8px` | Inline |
|
||||||
|
| `--space-3` | `16px` | Element gaps |
|
||||||
|
| `--space-4` | `24px` | Section |
|
||||||
|
| `--space-5` | `32px` | Component |
|
||||||
|
| `--space-6` | `40px` | Card padding |
|
||||||
|
| `--space-8` | `64px` | Scene gaps |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. DIMENSIONS (303 frames from Figma)
|
||||||
|
|
||||||
|
### Unique Sizes
|
||||||
|
|
||||||
|
| Size | Count | Usage |
|
||||||
|
|------|-------|-------|
|
||||||
|
| 1920×1080 | 40 | Hero frames |
|
||||||
|
| 400×210 | 21 | Cards |
|
||||||
|
| 400×80 | 21 | Buttons/headers |
|
||||||
|
| 400×90 | 21 | Inputs |
|
||||||
|
| 380×391 | 16 | Cards large |
|
||||||
|
| 380×138 | 16 | Cards medium |
|
||||||
|
| 1760×161 | 4 | Navigation |
|
||||||
|
| 1760×391 | 4 | Hero large |
|
||||||
|
| 1760×677 | 2 | Hero extra |
|
||||||
|
| 1160×640 | 4 | Content |
|
||||||
|
| 1160×320 | 8 | Content small |
|
||||||
|
|
||||||
|
### Component Sizes
|
||||||
|
|
||||||
|
| Component | Width | Height | Count |
|
||||||
|
|-----------|-------|--------|-------|
|
||||||
|
| Hero | 1920px | 1080px | 40 |
|
||||||
|
| Card | 400px | 210px | 21 |
|
||||||
|
| Card Large | 380px | 391px | 16 |
|
||||||
|
| Button | 400px | 80px | 21 |
|
||||||
|
| Input | 400px | 90px | 21 |
|
||||||
|
| Nav | 1760px | 161px | 4 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. COMPONENTS (427 from Figma)
|
||||||
|
|
||||||
|
*Создаются из фреймов на основе паттернов:*
|
||||||
|
|
||||||
|
| Component | Type | Size | Pattern |
|
||||||
|
|-----------|------|------|---------|
|
||||||
|
| Hero | FRAME | 1920×1080 | 40 instances |
|
||||||
|
| Card | FRAME | 400×210 | 21 instances |
|
||||||
|
| Card Large | FRAME | 380×391 | 16 instances |
|
||||||
|
| Button | FRAME | 400×80 | 21 instances |
|
||||||
|
| Input | FRAME | 400×90 | 21 instances |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. CSS VARIABLES (production-ready)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Auto-generated from Figma */
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-surface: #e7f7f7;
|
||||||
|
--color-purple: #867de5;
|
||||||
|
--color-purple-dark: #5d26be;
|
||||||
|
--color-pink: #ff6fcc;
|
||||||
|
--color-yellow: #e6ff6f;
|
||||||
|
--color-ink: #010101;
|
||||||
|
--color-gray: #d9d9d9;
|
||||||
|
--color-surface-light: #ecf9f9;
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-purple), var(--color-pink));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple));
|
||||||
|
--gradient-accent: linear-gradient(90deg, var(--color-pink), var(--color-yellow));
|
||||||
|
--gradient-dark: linear-gradient(180deg, var(--color-bg), #1a0b2e);
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-primary: 'Sora', -apple-system, sans-serif;
|
||||||
|
--font-secondary: 'Inter', -apple-system, sans-serif;
|
||||||
|
--font-weight-light: 200;
|
||||||
|
--font-weight-thin: 100;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 300;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--space-1: 4px;
|
||||||
|
--space-2: 8px;
|
||||||
|
--space-3: 16px;
|
||||||
|
--space-4: 24px;
|
||||||
|
--space-5: 32px;
|
||||||
|
--space-6: 40px;
|
||||||
|
--space-8: 64px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Generated from Figma • Figma to HyperFrames v1.0*
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"id": "ads-stories",
|
||||||
|
"name": "ads-stories",
|
||||||
|
"createdAt": "2026-07-05T11:18:41.723Z"
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"name": "ads-stories",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "npx --yes hyperframes@0.7.33 preview",
|
||||||
|
"check": "npx --yes hyperframes@0.7.33 lint && npx --yes hyperframes@0.7.33 validate && npx --yes hyperframes@0.7.33 inspect",
|
||||||
|
"render": "npx --yes hyperframes@0.7.33 render",
|
||||||
|
"publish": "npx --yes hyperframes@0.7.33 publish"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
@@ -0,0 +1,194 @@
|
|||||||
|
# Style.md — Figma Analysis v1.0
|
||||||
|
|
||||||
|
> **Статус:** Live from Figma API
|
||||||
|
> **Источник:** https://www.figma.com/file/eK2J5cS2dSzv8kIblv8iOY
|
||||||
|
> **Дата анализа:** 2026-07-05
|
||||||
|
> **Файл:** like stype2
|
||||||
|
> **Версия:** 2372687492209533567
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. CANVAS & LAYOUT
|
||||||
|
|
||||||
|
| Token | Value | Source |
|
||||||
|
|-------|-------|--------|
|
||||||
|
| `--canvas-width` | `1080px` | Stories format |
|
||||||
|
| `--canvas-height` | `1920px` | Stories format |
|
||||||
|
| `--canvas-ratio` | `9:16` | Stories format |
|
||||||
|
| `--bg-canvas` | `#050508` | Derived from #000000 |
|
||||||
|
| `--safe-top` | `280px` | WhatsApp/IG UI |
|
||||||
|
| `--safe-bottom` | `380px` | IG/Telegram UI |
|
||||||
|
| `--safe-content` | `Y:280-1540` | 1260px height |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. COLORS (7 unique from Figma)
|
||||||
|
|
||||||
|
### Palette
|
||||||
|
|
||||||
|
| Token | Hex | Usage |
|
||||||
|
|-------|-----|-------|
|
||||||
|
| `--color-primary` | `#ffffff` | Фон, текст |
|
||||||
|
| `--color-accent` | `#d1f800` | Жёлтый акцент |
|
||||||
|
| `--color-bg` | `#000000` | Фон тёмный |
|
||||||
|
| `--color-brand` | `#0566fa` | Синий (Stripe-like) |
|
||||||
|
| `--color-surface` | `#feffff` | Поверхность |
|
||||||
|
| `--color-text` | `#161616` | Тёмный текст |
|
||||||
|
| `--color-muted` | `#f4f4f4` | Светлый текст |
|
||||||
|
|
||||||
|
### Gradients
|
||||||
|
|
||||||
|
| Token | Definition |
|
||||||
|
|-------|------------|
|
||||||
|
| `--gradient-primary` | `linear-gradient(135deg, #ffffff, #d1f800)` |
|
||||||
|
| `--gradient-secondary` | `linear-gradient(135deg, #d1f800, #000000)` |
|
||||||
|
| `--gradient-brand` | `linear-gradient(135deg, #0566fa, #d1f800)` |
|
||||||
|
|
||||||
|
### CSS Variables
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-accent: #d1f800;
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-brand: #0566fa;
|
||||||
|
--color-surface: #feffff;
|
||||||
|
--color-text: #161616;
|
||||||
|
--color-muted: #f4f4f4;
|
||||||
|
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-accent), var(--color-bg));
|
||||||
|
--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. TYPOGRAPHY (214 instances from Figma)
|
||||||
|
|
||||||
|
### Fonts
|
||||||
|
|
||||||
|
| Font | Family | Weights | Instances |
|
||||||
|
|------|--------|---------|-----------|
|
||||||
|
| Inter | `Inter` | 400, 700 | 214 |
|
||||||
|
|
||||||
|
### Scale
|
||||||
|
|
||||||
|
| Element | Size | Weight | Source |
|
||||||
|
|---------|------|--------|--------|
|
||||||
|
| Base | 14px | 400 | Figma |
|
||||||
|
| Small | 15px | 400 | Figma |
|
||||||
|
| Regular | 16px | 400 | Figma |
|
||||||
|
| Subhead | 18px | 700 | Figma |
|
||||||
|
| Body | 20px | 400 | Figma |
|
||||||
|
| Caption | 21px | 400 | Figma |
|
||||||
|
| Button | 22px | 700 | Figma |
|
||||||
|
| Heading | 24px | 700 | Figma |
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--font-primary: 'Inter', -apple-system, sans-serif;
|
||||||
|
--font-size-base: 16px;
|
||||||
|
--font-size-sm: 14px;
|
||||||
|
--font-size-lg: 18px;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. SPACING (derived from Figma frames)
|
||||||
|
|
||||||
|
| Token | Value | Source |
|
||||||
|
|-------|-------|--------|
|
||||||
|
| `--space-1` | `4px` | Micro |
|
||||||
|
| `--space-2` | `8px` | Inline |
|
||||||
|
| `--space-3` | `16px` | Element gaps |
|
||||||
|
| `--space-4` | `24px` | Section |
|
||||||
|
| `--space-5` | `32px` | Component |
|
||||||
|
| `--space-6` | `40px` | Card padding |
|
||||||
|
| `--space-8` | `64px` | Scene gaps |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. DIMENSIONS (156 frames from Figma)
|
||||||
|
|
||||||
|
### Unique Sizes
|
||||||
|
|
||||||
|
| Size | Count | Usage |
|
||||||
|
|------|-------|-------|
|
||||||
|
| 1920×1080 | 16 | Hero frames |
|
||||||
|
| 184×79 | 9 | Card elements |
|
||||||
|
| 204×58 | 7 | Button variants |
|
||||||
|
| 204×82 | 6 | Input fields |
|
||||||
|
| 184×58 | 4 | Icon containers |
|
||||||
|
|
||||||
|
### Component Sizes
|
||||||
|
|
||||||
|
| Component | Width | Height | Count |
|
||||||
|
|-----------|-------|--------|-------|
|
||||||
|
| Hero | 1920px | 1080px | 16 |
|
||||||
|
| Card | 488px | 416px | 1 |
|
||||||
|
| Button | 204px | 58px | 7 |
|
||||||
|
| Input | 464px | 344px | 1 |
|
||||||
|
| Badge | 63px | 63px | 2 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. COMPONENTS (0 components from Figma)
|
||||||
|
|
||||||
|
*Компоненты не найдены в исходном файле. Создаются из фреймов.*
|
||||||
|
|
||||||
|
| Component | Type | Size |
|
||||||
|
|-----------|------|------|
|
||||||
|
| Button | FRAME | 204×58 |
|
||||||
|
| Input | FRAME | 464×344 |
|
||||||
|
| Card | FRAME | 488×416 |
|
||||||
|
| Badge | FRAME | 63×63 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. CSS VARIABLES (production-ready)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Auto-generated from Figma */
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--color-primary: #ffffff;
|
||||||
|
--color-accent: #d1f800;
|
||||||
|
--color-bg: #000000;
|
||||||
|
--color-brand: #0566fa;
|
||||||
|
--color-surface: #feffff;
|
||||||
|
--color-text: #161616;
|
||||||
|
--color-muted: #f4f4f4;
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-accent), var(--color-bg));
|
||||||
|
--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-primary: 'Inter', -apple-system, sans-serif;
|
||||||
|
--font-size-base: 16px;
|
||||||
|
--font-size-sm: 14px;
|
||||||
|
--font-size-lg: 18px;
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--space-1: 4px;
|
||||||
|
--space-2: 8px;
|
||||||
|
--space-3: 16px;
|
||||||
|
--space-4: 24px;
|
||||||
|
--space-5: 32px;
|
||||||
|
--space-6: 40px;
|
||||||
|
--space-8: 64px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Generated from Figma • Figma to HyperFrames v1.0*
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
/* Auto-generated from Figma */
|
||||||
|
:root {
|
||||||
|
--color-1: #ffffff;
|
||||||
|
--color-2: #000000;
|
||||||
|
--color-3: #e7f7f7;
|
||||||
|
--color-4: #867de5;
|
||||||
|
--color-5: #5d26be;
|
||||||
|
--color-6: #ff6fcc;
|
||||||
|
--color-7: #e6ff6f;
|
||||||
|
--color-8: #010101;
|
||||||
|
--color-9: #d9d9d9;
|
||||||
|
--color-10: #ecf9f9;
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--color-1), var(--color-2));
|
||||||
|
--gradient-secondary: linear-gradient(135deg, var(--color-2), var(--color-3));
|
||||||
|
}
|
||||||
Reference in new issue
Block a user