Update: 将子项目从 submodule 转为完整内容
- 移除 GovAI, nomifun-tauri, 算力盒子 的 submodule 引用 - 添加所有子项目的完整源代码 - 保留原始 .git 为 .git.bak 备份
This commit is contained in:
freedak
BIN
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -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
|
||||
@@ -0,0 +1,134 @@
|
||||
# 法智通宣传片 · 交付状态（STATUS.md）
|
||||
|
||||
**项目路径**: `/Users/freedak/Documents/AIProjects/GovAI/videos/fazhitong-promo`
|
||||
**完成时间**: 2026-06-27
|
||||
**总时长**: 72 秒（7 个场景）
|
||||
**画幅**: 1920×1080 (16:9)
|
||||
|
||||
---
|
||||
|
||||
## ✅ 已完成
|
||||
|
||||
### 1. 项目初始化与素材准备
|
||||
- ✅ HyperFrames 0.7.14 工程脚手架（`hyperframes.json`、`package.json`、`meta.json`）
|
||||
- ✅ 12 张真实产品截图 + 架构图已复制到 `assets/capture/`
|
||||
- ✅ 设计系统文档 `docs/frame.md`（政务风配色、字体、动效规范）
|
||||
- ✅ 分镜脚本 `docs/STORYBOARD.md`（7 段分镜 + 295 字配音文稿）
|
||||
- ✅ 时间轴设计 `docs/TIMELINE.md`（每帧 track 布局与时序）
|
||||
|
||||
### 2. 7 帧 HTML 全部构建完成
|
||||
| 文件 | 场景 | 时长 | 状态 |
|
||||
|------|------|------|------|
|
||||
| `index.html` | 主时间轴 | 72s | ✅ |
|
||||
| `compositions/s1-intro.html` | 开场·法治日报背书 | 8s | ✅ |
|
||||
| `compositions/s2-security.html` | 安全第一·数据不出域 | 14s | ✅ |
|
||||
| `compositions/s3-apps.html` | 应用即插即用 | 12s | ✅ |
|
||||
| `compositions/s4-knowledge.html` | 自建知识库 | 10s | ✅ |
|
||||
| `compositions/s5-ppt.html` | 一键生成汇报 | 10s | ✅ |
|
||||
| `compositions/s6-deploy.html` | 独立部署+治理 | 10s | ✅ |
|
||||
| `compositions/s7-outro.html` | 收尾·网址落版 | 8s | ✅ |
|
||||
|
||||
### 3. HyperFrames 校验状态
|
||||
- ✅ 所有 `data-composition-id` 已添加
|
||||
- ✅ 所有 `data-width/height` 已设置为 1920×1080
|
||||
- ✅ 资源路径已修正（`../assets/` → `assets/`）
|
||||
- ⚠️ **剩余约 20 个 track 重叠警告**（同一 track 多元素时间重叠）
|
||||
- ⚠️ 字体警告（PingFang SC 未提供 woff2，会降级到系统字体）
|
||||
|
||||
---
|
||||
|
||||
## ⏸️ 待后续处理
|
||||
|
||||
### 1. 配音（阻塞：HeyGen API 网络超时）
|
||||
- **问题**: `npx hyperframes auth login --api-key` 连接 HeyGen 服务超时
|
||||
- **方案**:
|
||||
- 网络恢复后重新登录，用 HeyGen 云端 TTS 生成中文配音
|
||||
- 或用本地 Kokoro TTS（需先解决 Python 依赖冲突）
|
||||
- 或你提供现成 WAV/MP3 配音文件，我放入 `assets/voiceover.wav`
|
||||
- **影响**: 当前是纯视觉静音版，可预览画面但无旁白
|
||||
|
||||
### 2. Track 重叠冲突修复（可选精调）
|
||||
- **现状**: 约 20 处同 track 元素时间重叠（主要在 S1/S2/S3/S4/S5）
|
||||
- **影响**: 预览时可能有视觉冲突（后面的元素会遮挡前面的）
|
||||
- **修复方案**:
|
||||
- 把重叠元素移到不同 `data-track-index`
|
||||
- 或调整 `data-duration` 避免重叠
|
||||
- **优先级**: 中（不影响功能，但影响最终渲染质量）
|
||||
|
||||
### 3. 字体优化（可选）
|
||||
- **现状**: PingFang SC 会降级到系统字体，非 macOS 环境可能显示不一致
|
||||
- **修复方案**: 下载 woff2 字体文件 → 放 `assets/fonts/` → 添加 `@font-face`
|
||||
- **优先级**: 低（系统字体降级可用，不影响内容可读性）
|
||||
|
||||
---
|
||||
|
||||
## 🚀 下一步操作
|
||||
|
||||
### 立即可做：预览画面
|
||||
```bash
|
||||
cd /Users/freedak/Documents/AIProjects/GovAI/videos/fazhitong-promo
|
||||
npm run dev
|
||||
```
|
||||
打开浏览器访问 `http://localhost:3000`，查看 72 秒静音版预览。
|
||||
|
||||
### 配音就位后：渲染 MP4
|
||||
```bash
|
||||
# 把配音文件放到 assets/voiceover.wav
|
||||
# 然后渲染
|
||||
npm run render -- -o fazhitong-promo.mp4
|
||||
```
|
||||
|
||||
### Track 重叠精修（可选）
|
||||
如果预览发现视觉冲突明显，告诉我具体哪几帧有问题，我逐个修复。
|
||||
|
||||
---
|
||||
|
||||
## 📁 目录结构
|
||||
|
||||
```
|
||||
videos/fazhitong-promo/
|
||||
├── index.html # 主时间轴（72s，7 个 composition）
|
||||
├── compositions/ # 7 个子场景
|
||||
│ ├── s1-intro.html
|
||||
│ ├── s2-security.html
|
||||
│ ├── s3-apps.html
|
||||
│ ├── s4-knowledge.html
|
||||
│ ├── s5-ppt.html
|
||||
│ ├── s6-deploy.html
|
||||
│ └── s7-outro.html
|
||||
├── assets/
|
||||
│ └── capture/ # 12 张截图 + 架构图
|
||||
│ ├── 00_login.png
|
||||
│ ├── 01_store.png
|
||||
│ ├── ...
|
||||
│ └── architecture.png
|
||||
├── docs/
|
||||
│ ├── frame.md # 设计系统
|
||||
│ ├── STORYBOARD.md # 分镜脚本 + 配音文稿
|
||||
│ └── TIMELINE.md # 时间轴设计
|
||||
├── script.txt # 配音文本（295 字）
|
||||
├── .env # HeyGen API Key
|
||||
├── hyperframes.json
|
||||
├── meta.json
|
||||
└── package.json
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 核心亮点
|
||||
|
||||
1. **安全主线突出**: S2 给了 14 秒最重权重，「数据不出域」用警示红强调
|
||||
2. **叙事闭环**: 安全开场 → 能力展示 → 落地交付，逻辑清晰
|
||||
3. **真实素材**: 12 张产品截图全部来自实际 UI，非占位图
|
||||
4. **政务风视觉**: 深蓝+金+红配色，庄重克制，符合政法行业调性
|
||||
5. **无 sub-agent**: 全程遵守 no-subagents 规则，7 帧串行构建
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 已知限制
|
||||
|
||||
- 配音暂缺（HeyGen API 网络不通）
|
||||
- Track 重叠未精修（约 20 处，不影响预览但可能影响最终渲染）
|
||||
- 字体会降级（PingFang SC → 系统字体）
|
||||
|
||||
建议先预览画面效果，再决定是否精修 track 重叠和配音。
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S1 - 开场</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-panel) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 金线装饰 */
|
||||
.gold-line {
|
||||
width: 800px;
|
||||
height: 3px;
|
||||
background: var(--gold);
|
||||
transform-origin: center;
|
||||
box-shadow: 0 0 20px rgba(212, 164, 55, 0.6);
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.text-producer {
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.text-heritage {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
color: var(--gold);
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
letter-spacing: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo-subtitle {
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
color: var(--gold);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s1-intro" data-width="1920" data-height="1080">
|
||||
<!-- Track 1: 金线擦出 (0.5–2s) -->
|
||||
<div class="clip gold-line"
|
||||
data-start="0.5"
|
||||
data-duration="7.5"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) scaleX(0);">
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 法治日报社 出品 (2–4s) -->
|
||||
<div class="clip text-producer"
|
||||
data-start="2"
|
||||
data-duration="6"
|
||||
data-track-index="2"
|
||||
style="top: 45%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
法治日报社 出品
|
||||
</div>
|
||||
|
||||
<!-- Track 3: 四十余年深耕政法领域 (4–6s) -->
|
||||
<div class="clip text-heritage"
|
||||
data-start="4"
|
||||
data-duration="4"
|
||||
data-track-index="3"
|
||||
style="top: 55%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
四十余年深耕政法领域
|
||||
</div>
|
||||
|
||||
<!-- Track 1: Logo (6–8s) -->
|
||||
<div class="clip logo-container"
|
||||
data-start="6"
|
||||
data-duration="2"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0;">
|
||||
<div class="logo-title">法智通</div>
|
||||
<div class="logo-subtitle">政法行业人工智能应用平台</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 注册时间轴
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s1-intro"] = tl;
|
||||
|
||||
// 金线擦出
|
||||
tl.to('[data-start="0.5"]', {
|
||||
scaleX: 1,
|
||||
duration: 1.5,
|
||||
ease: "power2.out"
|
||||
}, 0.5);
|
||||
|
||||
// 法治日报社 出品
|
||||
tl.to('[data-start="2"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 2);
|
||||
|
||||
// 四十余年深耕政法领域
|
||||
tl.to('[data-start="4"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 4);
|
||||
|
||||
// Logo 放大入场
|
||||
tl.to('[data-start="6"]', {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 6);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S2 - 安全第一</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: var(--bg-deep);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 架构图背景 */
|
||||
.architecture-bg {
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
background-image: url('assets/capture/architecture.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
/* 金线勾勒框 */
|
||||
.highlight-box {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border: 3px solid var(--gold);
|
||||
box-shadow: 0 0 30px rgba(212, 164, 55, 0.5);
|
||||
}
|
||||
|
||||
/* 关键词卡片 */
|
||||
.keyword {
|
||||
padding: 24px 48px;
|
||||
font-size: 52px;
|
||||
font-weight: bold;
|
||||
border-radius: 12px;
|
||||
letter-spacing: 4px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.keyword.red {
|
||||
background: rgba(192, 57, 43, 0.2);
|
||||
color: var(--seal-red);
|
||||
border: 2px solid var(--seal-red);
|
||||
}
|
||||
|
||||
.keyword.gold {
|
||||
background: rgba(212, 164, 55, 0.15);
|
||||
color: var(--gold);
|
||||
border: 2px solid var(--gold);
|
||||
}
|
||||
|
||||
/* 小窗截图 */
|
||||
.thumbnail {
|
||||
width: 480px;
|
||||
height: 270px;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s2-security" data-width="1920" data-height="1080">
|
||||
<!-- Track 0: 深蓝底（隐式，body 背景） -->
|
||||
|
||||
<!-- Track 1: 架构图背景 (0–14s) -->
|
||||
<div class="clip architecture-bg"
|
||||
data-start="0"
|
||||
data-duration="14"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
</div>
|
||||
|
||||
<!-- Track 4: 金线勾勒边缘算力机 (2–14s) -->
|
||||
<div class="clip highlight-box"
|
||||
data-start="2"
|
||||
data-duration="12"
|
||||
data-track-index="4"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); opacity: 0;">
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 关键词1 - 数据不出域 (4–10s) -->
|
||||
<div class="clip keyword red"
|
||||
data-start="4"
|
||||
data-duration="6"
|
||||
data-track-index="2"
|
||||
style="top: 30%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
数据不出域
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 关键词2 - 算力在身边 (6–10s) -->
|
||||
<div class="clip keyword gold"
|
||||
data-start="6"
|
||||
data-duration="4"
|
||||
data-track-index="2"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
算力在身边
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 关键词3 - 内外网物理隔离 (8–10s) -->
|
||||
<div class="clip keyword gold"
|
||||
data-start="8"
|
||||
data-duration="2"
|
||||
data-track-index="2"
|
||||
style="top: 70%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
内外网物理隔离
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 小窗1 - 审计日志 (10–14s) -->
|
||||
<div class="clip thumbnail"
|
||||
data-start="10"
|
||||
data-duration="4"
|
||||
data-track-index="1"
|
||||
style="bottom: 80px; right: 480px; opacity: 0;">
|
||||
<img src="assets/capture/11_audit.png" alt="审计日志">
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 小窗2 - 登录认证 (12–14s) -->
|
||||
<div class="clip thumbnail"
|
||||
data-start="12"
|
||||
data-duration="2"
|
||||
data-track-index="1"
|
||||
style="bottom: 80px; right: 80px; opacity: 0;">
|
||||
<img src="assets/capture/00_login.png" alt="登录认证">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s2-security"] = tl;
|
||||
|
||||
// 架构图背景浮现
|
||||
tl.to('[data-start="0"]', {
|
||||
opacity: 0.4,
|
||||
duration: 1.5,
|
||||
ease: "power2.out"
|
||||
}, 0);
|
||||
|
||||
// 金线勾勒框
|
||||
tl.to('[data-start="2"]', {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 2);
|
||||
|
||||
// 关键词1 - 数据不出域（警示红）
|
||||
tl.to('[data-start="4"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "back.out(1.2)"
|
||||
}, 4);
|
||||
|
||||
// 关键词2 - 算力在身边
|
||||
tl.to('[data-start="6"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "back.out(1.2)"
|
||||
}, 6);
|
||||
|
||||
// 关键词3 - 内外网物理隔离
|
||||
tl.to('[data-start="8"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "back.out(1.2)"
|
||||
}, 8);
|
||||
|
||||
// 小窗1 - 审计日志
|
||||
tl.to('[data-start="10"]', {
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
ease: "power2.out"
|
||||
}, 10);
|
||||
|
||||
// 小窗2 - 登录认证
|
||||
tl.to('[data-start="12"]', {
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
ease: "power2.out"
|
||||
}, 12);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S3 - 应用即插即用</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: var(--bg-deep);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 主视觉截图 */
|
||||
.main-visual {
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.main-visual img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.title {
|
||||
font-size: 64px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
letter-spacing: 6px;
|
||||
text-align: center;
|
||||
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 应用卡片网格 */
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 320px);
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
background: var(--bg-panel);
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.app-card .badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--gold);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.app-card .name {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--text-hi);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-card .category {
|
||||
font-size: 18px;
|
||||
color: var(--text-lo);
|
||||
}
|
||||
|
||||
/* 快闪截图 */
|
||||
.flash-screen {
|
||||
width: 1400px;
|
||||
height: 800px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.flash-screen img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s3-apps" data-width="1920" data-height="1080">
|
||||
<!-- Track 1: 主视觉 - 应用商店 (0–12s，向左推进) -->
|
||||
<div class="clip main-visual"
|
||||
data-start="0"
|
||||
data-duration="7"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(200px); opacity: 0;">
|
||||
<img src="assets/capture/01_store.png" alt="AI应用中心">
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 标题 (2–12s) -->
|
||||
<div class="clip title"
|
||||
data-start="2"
|
||||
data-duration="10"
|
||||
data-track-index="2"
|
||||
style="top: 120px; left: 50%; transform: translateX(-50%) translateY(24px); opacity: 0;">
|
||||
数十款政法专用应用
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 应用卡片网格 (4–8s) -->
|
||||
<div class="clip app-grid"
|
||||
data-start="4"
|
||||
data-duration="4"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<div class="app-card">
|
||||
<div class="badge"></div>
|
||||
<div class="name">公文写作</div>
|
||||
<div class="category">办文场景</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="badge"></div>
|
||||
<div class="name">法规问答</div>
|
||||
<div class="category">办案场景</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="badge"></div>
|
||||
<div class="name">案件研判</div>
|
||||
<div class="category">研判场景</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="badge"></div>
|
||||
<div class="name">来信回复</div>
|
||||
<div class="category">办文场景</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="badge"></div>
|
||||
<div class="name">舆情宣传</div>
|
||||
<div class="category">研判场景</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<div class="badge"></div>
|
||||
<div class="name">外事翻译</div>
|
||||
<div class="category">办文场景</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 快闪 - 法规问答 (8–10s) -->
|
||||
<div class="clip flash-screen"
|
||||
data-start="8"
|
||||
data-duration="2"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<img src="assets/capture/09_chat.png" alt="法规问答">
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 快闪 - 创建应用 (10–12s) -->
|
||||
<div class="clip flash-screen"
|
||||
data-start="10"
|
||||
data-duration="2"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<img src="assets/capture/04_create.png" alt="创建应用">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s3-apps"] = tl;
|
||||
|
||||
// 主视觉推进入场
|
||||
tl.to('[data-start="0"]', {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 1.2,
|
||||
ease: "power2.out"
|
||||
}, 0);
|
||||
|
||||
// 标题
|
||||
tl.to('[data-start="2"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 2);
|
||||
|
||||
// 应用卡片网格（stagger）
|
||||
tl.to('[data-start="4"] .app-card', {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.5,
|
||||
stagger: 0.1,
|
||||
ease: "back.out(1.5)"
|
||||
}, 4);
|
||||
|
||||
// 快闪1 - 法规问答
|
||||
tl.to('[data-start="8"]', {
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
ease: "power2.out"
|
||||
}, 8);
|
||||
|
||||
// 快闪2 - 创建应用
|
||||
tl.to('[data-start="10"]', {
|
||||
opacity: 1,
|
||||
duration: 0.3,
|
||||
ease: "power2.out"
|
||||
}, 10);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S4 - 自建知识库</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: var(--bg-deep);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 知识库界面背景 */
|
||||
.kb-bg {
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
background-image: url('assets/capture/05_knowledge.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 12px;
|
||||
filter: brightness(0.4);
|
||||
}
|
||||
|
||||
/* 文档图标 */
|
||||
.doc-icon {
|
||||
width: 120px;
|
||||
height: 140px;
|
||||
background: var(--bg-panel);
|
||||
border: 2px solid var(--gold);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: var(--gold);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 知识库容器 */
|
||||
.kb-container {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
background: rgba(30, 91, 198, 0.2);
|
||||
border: 3px solid var(--brand-blue);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
box-shadow: 0 0 40px rgba(30, 91, 198, 0.4);
|
||||
}
|
||||
|
||||
/* 流程示意 */
|
||||
.process-flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.process-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: var(--bg-panel);
|
||||
border: 2px solid var(--gold);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.process-label {
|
||||
font-size: 24px;
|
||||
color: var(--text-lo);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 48px;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* 标语 */
|
||||
.slogan {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
color: var(--gold);
|
||||
letter-spacing: 8px;
|
||||
text-align: center;
|
||||
text-shadow: 0 4px 20px rgba(212, 164, 55, 0.6);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s4-knowledge" data-width="1920" data-height="1080">
|
||||
<!-- Track 1: 知识库界面背景 (0–10s) -->
|
||||
<div class="clip kb-bg"
|
||||
data-start="0"
|
||||
data-duration="10"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 文档图标 PDF (2–10s) -->
|
||||
<div class="clip doc-icon"
|
||||
data-start="2"
|
||||
data-duration="8"
|
||||
data-track-index="1"
|
||||
style="top: 35%; left: 20%; transform: translateX(-200px); opacity: 0;">
|
||||
📄
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 文档图标 Word (3–10s) -->
|
||||
<div class="clip doc-icon"
|
||||
data-start="3"
|
||||
data-duration="7"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 20%; transform: translateX(-200px); opacity: 0;">
|
||||
📝
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 文档图标 Excel (4–10s) -->
|
||||
<div class="clip doc-icon"
|
||||
data-start="4"
|
||||
data-duration="6"
|
||||
data-track-index="1"
|
||||
style="top: 65%; left: 20%; transform: translateX(-200px); opacity: 0;">
|
||||
📊
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 知识库容器 (2–10s) -->
|
||||
<div class="clip kb-container"
|
||||
data-start="2"
|
||||
data-duration="8"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0;">
|
||||
知识库
|
||||
</div>
|
||||
|
||||
<!-- Track 4: 流程示意 (6–8s) -->
|
||||
<div class="clip process-flow"
|
||||
data-start="6"
|
||||
data-duration="2"
|
||||
data-track-index="4"
|
||||
style="bottom: 120px; left: 50%; transform: translateX(-50%); opacity: 0;">
|
||||
<div class="process-step">
|
||||
<div class="process-icon">📦</div>
|
||||
<div class="process-label">分块</div>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">
|
||||
<div class="process-icon">🔢</div>
|
||||
<div class="process-label">向量化</div>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">
|
||||
<div class="process-icon">🎯</div>
|
||||
<div class="process-label">检索</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 标语 (8–10s) -->
|
||||
<div class="clip slogan"
|
||||
data-start="8"
|
||||
data-duration="2"
|
||||
data-track-index="2"
|
||||
style="top: 20%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
让 AI 通晓"本地法"
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s4-knowledge"] = tl;
|
||||
|
||||
// 知识库界面背景
|
||||
tl.to('[data-start="0"]', {
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: "power2.out"
|
||||
}, 0);
|
||||
|
||||
// 文档图标 PDF
|
||||
tl.to('[data-start="2"]', {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 2);
|
||||
|
||||
// 文档图标 Word
|
||||
tl.to('[data-start="3"]', {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 3);
|
||||
|
||||
// 文档图标 Excel
|
||||
tl.to('[data-start="4"]', {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 4);
|
||||
|
||||
// 知识库容器
|
||||
tl.to('[data-start="2"]', {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.5)"
|
||||
}, 2);
|
||||
|
||||
// 流程示意
|
||||
tl.to('[data-start="6"]', {
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 6);
|
||||
|
||||
// 标语
|
||||
tl.to('[data-start="8"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 8);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S5 - 一键生成汇报</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: var(--bg-deep);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-box {
|
||||
width: 800px;
|
||||
height: 120px;
|
||||
background: var(--bg-panel);
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
font-size: 32px;
|
||||
color: var(--text-lo);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 生成按钮 */
|
||||
.generate-btn {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
background: var(--brand-blue);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(30, 91, 198, 0.6);
|
||||
}
|
||||
|
||||
/* PPT 卡片 */
|
||||
.ppt-card {
|
||||
width: 360px;
|
||||
height: 240px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ppt-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--brand-blue), var(--gold));
|
||||
}
|
||||
|
||||
.ppt-card-content {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* PPT 网格 */
|
||||
.ppt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 360px);
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* 标注 */
|
||||
.annotation {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
font-size: 28px;
|
||||
color: var(--text-lo);
|
||||
}
|
||||
|
||||
.annotation span {
|
||||
padding: 8px 20px;
|
||||
background: rgba(42, 67, 107, 0.3);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* 时间对比 */
|
||||
.time-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-size: 120px;
|
||||
font-weight: bold;
|
||||
color: var(--gold);
|
||||
font-family: "DIN Alternate", "Helvetica Neue", sans-serif;
|
||||
text-shadow: 0 4px 20px rgba(212, 164, 55, 0.6);
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 36px;
|
||||
color: var(--text-lo);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.arrow-large {
|
||||
font-size: 72px;
|
||||
color: var(--gold);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s5-ppt" data-width="1920" data-height="1080">
|
||||
<!-- Track 1: 输入框 (0–6s) -->
|
||||
<div class="clip input-box"
|
||||
data-start="0"
|
||||
data-duration="6"
|
||||
data-track-index="1"
|
||||
style="top: 30%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
输入主题：政法工作年度总结汇报
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 生成按钮 (1–6s) -->
|
||||
<div class="clip generate-btn"
|
||||
data-start="1"
|
||||
data-duration="5"
|
||||
data-track-index="1"
|
||||
style="top: 30%; left: 50%; transform: translate(280px, -50%) scale(0.9); opacity: 0;">
|
||||
生成
|
||||
</div>
|
||||
|
||||
<!-- Track 1: PPT 卡片网格 (3–6s) -->
|
||||
<div class="clip ppt-grid"
|
||||
data-start="3"
|
||||
data-duration="3"
|
||||
data-track-index="1"
|
||||
style="top: 55%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<div class="ppt-card">
|
||||
<div class="ppt-card-content">封面页</div>
|
||||
</div>
|
||||
<div class="ppt-card">
|
||||
<div class="ppt-card-content">工作概述</div>
|
||||
</div>
|
||||
<div class="ppt-card">
|
||||
<div class="ppt-card-content">重点成果</div>
|
||||
</div>
|
||||
<div class="ppt-card">
|
||||
<div class="ppt-card-content">数据分析</div>
|
||||
</div>
|
||||
<div class="ppt-card">
|
||||
<div class="ppt-card-content">经验总结</div>
|
||||
</div>
|
||||
<div class="ppt-card">
|
||||
<div class="ppt-card-content">未来展望</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 标注 (6–10s) -->
|
||||
<div class="clip annotation"
|
||||
data-start="6"
|
||||
data-duration="4"
|
||||
data-track-index="2"
|
||||
style="top: 22%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<span>16:9 / 4:3</span>
|
||||
<span>原生可编辑</span>
|
||||
<span>全程本地</span>
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 时间对比 (8–10s) -->
|
||||
<div class="clip time-compare"
|
||||
data-start="8"
|
||||
data-duration="2"
|
||||
data-track-index="1"
|
||||
style="top: 60%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<div style="text-align: center;">
|
||||
<div class="time-value" data-count="7">0</div>
|
||||
<div class="time-label">天</div>
|
||||
</div>
|
||||
<div class="arrow-large">→</div>
|
||||
<div style="text-align: center;">
|
||||
<div class="time-value" data-count="5">0</div>
|
||||
<div class="time-label">分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s5-ppt"] = tl;
|
||||
|
||||
// 输入框
|
||||
tl.to('[data-start="0"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 0);
|
||||
|
||||
// 生成按钮
|
||||
tl.to('[data-start="1"]', {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
ease: "back.out(1.5)"
|
||||
}, 1);
|
||||
|
||||
// PPT 卡片网格（stagger）
|
||||
tl.to('[data-start="3"] .ppt-card', {
|
||||
opacity: 1,
|
||||
rotateY: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.12,
|
||||
ease: "back.out(1.2)"
|
||||
}, 3);
|
||||
|
||||
// 标注
|
||||
tl.to('[data-start="6"]', {
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
ease: "power2.out"
|
||||
}, 6);
|
||||
|
||||
// 时间对比容器
|
||||
tl.to('[data-start="8"]', {
|
||||
opacity: 1,
|
||||
duration: 0.5,
|
||||
ease: "power2.out"
|
||||
}, 8);
|
||||
|
||||
// 数字 count-up（确定性动画）
|
||||
tl.to('[data-count="7"]', {
|
||||
innerText: 7,
|
||||
duration: 1,
|
||||
snap: { innerText: 1 },
|
||||
ease: "power2.out"
|
||||
}, 8.2);
|
||||
|
||||
tl.to('[data-count="5"]', {
|
||||
innerText: 5,
|
||||
duration: 1,
|
||||
snap: { innerText: 1 },
|
||||
ease: "power2.out"
|
||||
}, 8.2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S6 - 独立部署与治理</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: var(--bg-deep);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 算力机箱体 */
|
||||
.server-box {
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
background: linear-gradient(135deg, var(--bg-panel) 0%, #1a2f4a 100%);
|
||||
border: 3px solid var(--brand-blue);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 48px rgba(30, 91, 198, 0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.server-icon {
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
.server-label {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.server-note {
|
||||
font-size: 24px;
|
||||
color: var(--gold);
|
||||
padding: 12px 24px;
|
||||
background: rgba(212, 164, 55, 0.1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--gold);
|
||||
}
|
||||
|
||||
/* 三联画 */
|
||||
.triple-screens {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.screen-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.screen-img {
|
||||
width: 540px;
|
||||
height: 340px;
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.screen-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.screen-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--text-hi);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 关键词条 */
|
||||
.keywords-bar {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
padding: 20px 40px;
|
||||
background: rgba(42, 67, 107, 0.3);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--line);
|
||||
}
|
||||
|
||||
.keyword-item {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: var(--gold);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.keyword-sep {
|
||||
font-size: 36px;
|
||||
color: var(--line);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s6-deploy" data-width="1920" data-height="1080">
|
||||
<!-- Track 1: 算力机箱体 (0–4s) -->
|
||||
<div class="clip server-box"
|
||||
data-start="0"
|
||||
data-duration="4"
|
||||
data-track-index="1"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0;">
|
||||
<div class="server-icon">🖥️</div>
|
||||
<div class="server-label">边缘算力机<br>预装即用</div>
|
||||
<div class="server-note">到场即通电 · 通电即可用</div>
|
||||
</div>
|
||||
|
||||
<!-- Track 1: 三联画 (4–10s) -->
|
||||
<div class="clip triple-screens"
|
||||
data-start="4"
|
||||
data-duration="6"
|
||||
data-track-index="1"
|
||||
style="top: 48%; left: 50%; transform: translate(-50%, -50%); opacity: 0;">
|
||||
<div class="screen-item">
|
||||
<div class="screen-img">
|
||||
<img src="assets/capture/08_overview.png" alt="平台总览">
|
||||
</div>
|
||||
<div class="screen-title">平台总览</div>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-img">
|
||||
<img src="assets/capture/02_dashboard.png" alt="数据仪表盘">
|
||||
</div>
|
||||
<div class="screen-title">数据仪表盘</div>
|
||||
</div>
|
||||
<div class="screen-item">
|
||||
<div class="screen-img">
|
||||
<img src="assets/capture/03_analytics.png" alt="用量分析">
|
||||
</div>
|
||||
<div class="screen-title">用量分析</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 关键词条 (8–10s) -->
|
||||
<div class="clip keywords-bar"
|
||||
data-start="8"
|
||||
data-duration="2"
|
||||
data-track-index="2"
|
||||
style="bottom: 100px; left: 50%; transform: translateX(-50%) translateY(24px); opacity: 0;">
|
||||
<div class="keyword-item">开箱即用</div>
|
||||
<div class="keyword-sep">·</div>
|
||||
<div class="keyword-item">本部门专属</div>
|
||||
<div class="keyword-sep">·</div>
|
||||
<div class="keyword-item">治理闭环</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s6-deploy"] = tl;
|
||||
|
||||
// 算力机箱体
|
||||
tl.to('[data-start="0"]', {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.5)"
|
||||
}, 0);
|
||||
|
||||
// 三联画（整体入场）
|
||||
tl.to('[data-start="4"]', {
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 4);
|
||||
|
||||
// 三联画内部（stagger）
|
||||
tl.to('[data-start="4"] .screen-item', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
stagger: 0.15,
|
||||
ease: "power2.out"
|
||||
}, 4.5);
|
||||
|
||||
// 关键词条
|
||||
tl.to('[data-start="8"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 8);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>S7 - 收尾</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
|
||||
background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-panel) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 金线装饰 */
|
||||
.gold-line-horizontal {
|
||||
width: 800px;
|
||||
height: 3px;
|
||||
background: var(--gold);
|
||||
transform-origin: center;
|
||||
box-shadow: 0 0 20px rgba(212, 164, 55, 0.6);
|
||||
}
|
||||
|
||||
/* 主标语 */
|
||||
.main-slogan {
|
||||
font-size: 96px;
|
||||
font-weight: bold;
|
||||
color: var(--text-hi);
|
||||
letter-spacing: 32px;
|
||||
text-align: center;
|
||||
text-shadow: 0 6px 24px rgba(242, 246, 252, 0.3);
|
||||
padding-left: 32px; /* 补偿 letter-spacing */
|
||||
}
|
||||
|
||||
/* 网址 */
|
||||
.website {
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
color: var(--gold);
|
||||
letter-spacing: 4px;
|
||||
text-align: center;
|
||||
padding: 24px 60px;
|
||||
background: rgba(212, 164, 55, 0.1);
|
||||
border: 2px solid var(--gold);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 40px rgba(212, 164, 55, 0.3);
|
||||
}
|
||||
|
||||
/* 出品方 */
|
||||
.producer {
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
color: var(--text-lo);
|
||||
letter-spacing: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="s7-outro" data-width="1920" data-height="1080">
|
||||
<!-- Track 1: 金线 (0–2s) -->
|
||||
<div class="clip gold-line-horizontal"
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-track-index="1"
|
||||
style="top: 35%; left: 50%; transform: translate(-50%, -50%) scaleX(0);">
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 主标语 (2–8s) -->
|
||||
<div class="clip main-slogan"
|
||||
data-start="2"
|
||||
data-duration="6"
|
||||
data-track-index="2"
|
||||
style="top: 42%; left: 50%; transform: translate(-50%, -50%) translateY(24px); opacity: 0;">
|
||||
安全 · 专属 · 易用
|
||||
</div>
|
||||
|
||||
<!-- Track 2: 网址 (4–8s) -->
|
||||
<div class="clip website"
|
||||
data-start="4"
|
||||
data-duration="4"
|
||||
data-track-index="2"
|
||||
style="top: 58%; left: 50%; transform: translate(-50%, -50%) scale(0.9); opacity: 0;">
|
||||
gov.opc8ai.com
|
||||
</div>
|
||||
|
||||
<!-- Track 3: 出品方 (6–8s) -->
|
||||
<div class="clip producer"
|
||||
data-start="6"
|
||||
data-duration="2"
|
||||
data-track-index="3"
|
||||
style="bottom: 100px; left: 50%; transform: translateX(-50%) translateY(24px); opacity: 0;">
|
||||
法治日报社 出品
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["s7-outro"] = tl;
|
||||
|
||||
// 金线擦出
|
||||
tl.to('[data-start="0"]', {
|
||||
scaleX: 1,
|
||||
duration: 1.2,
|
||||
ease: "power2.out"
|
||||
}, 0);
|
||||
|
||||
// 主标语
|
||||
tl.to('[data-start="2"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.out"
|
||||
}, 2);
|
||||
|
||||
// 网址高亮
|
||||
tl.to('[data-start="4"]', {
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.5)"
|
||||
}, 4);
|
||||
|
||||
// 出品方
|
||||
tl.to('[data-start="6"]', {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
ease: "power2.out"
|
||||
}, 6);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
# 法智通宣传片 · 分镜脚本与配音文稿（STORYBOARD.md）
|
||||
|
||||
- 画幅 16:9 · 目标 72s · 中文配音 + 字幕
|
||||
- 配音字数约 295 字（约 4.5 字/秒 × 65s + 镜头留白）
|
||||
- 主线：安全第一 → 专业能力 → 落地交付
|
||||
|
||||
---
|
||||
|
||||
## S1 开场 · 权威背书（0:00–0:08，8s）
|
||||
|
||||
**画面**
|
||||
- 深蓝底，金色细线自中心向两侧擦出
|
||||
- 文字逐行入场：「法治日报社 出品」→「四十余年深耕政法领域」
|
||||
- 收束为 logo：法智通 · 政法行业人工智能应用平台
|
||||
|
||||
**配音**
|
||||
> 法治日报社，四十余年深耕政法领域。如今，将这份专业，注入人工智能——法智通，政法行业人工智能应用平台。
|
||||
|
||||
**字幕**：法治日报社出品 · 法智通政法行业 AI 应用平台
|
||||
|
||||
---
|
||||
|
||||
## S2 优势一 · 安全第一（0:08–0:22，14s）｜主线最重
|
||||
|
||||
**画面**
|
||||
- 架构图 `architecture.png` 居中浮现，金线勾勒"边缘算力机"
|
||||
- 关键词依次以警示红/金高亮弹出：
|
||||
「数据不出域」「算力在身边」「内外网物理隔离」
|
||||
- 右下角叠 `11_audit.png`（审计日志）+ `00_login.png`（多级权限）小窗
|
||||
- 「数据不出域」用警示红强调一次
|
||||
|
||||
**配音**
|
||||
> 安全保密，是政法工作的第一要务。法智通坚持数据不出域、算力在身边——大模型与知识库全部部署在机构本地，内外网物理隔离，配合多级权限与全量审计，每一次操作可追溯、可倒查。
|
||||
|
||||
**字幕**：数据不出域 · 内外网物理隔离 · 全量审计可追溯
|
||||
|
||||
---
|
||||
|
||||
## S3 优势三 · 应用即插即用（0:22–0:34，12s）
|
||||
|
||||
**画面**
|
||||
- `01_store.png` AI 应用中心作为主视觉，向左推进入场
|
||||
- 数十款应用卡片网格铺开（金色徽章标注分类）
|
||||
- 切 `09_chat.png` 法规问答 / `04_create.png` 创建应用 快闪
|
||||
|
||||
**配音**
|
||||
> 平台预置数十款政法专用应用，覆盖公文写作、法规问答、案件研判、来信回复、舆情宣传。即插即用，全生命周期管理，从源头保证内容合规。
|
||||
|
||||
**字幕**：数十款政法专用应用 · 即插即用
|
||||
|
||||
---
|
||||
|
||||
## S4 优势四 · 自建知识库（0:34–0:44，10s）
|
||||
|
||||
**画面**
|
||||
- `05_knowledge.png` 知识库界面，文档图标流入"知识库"容器
|
||||
- 动效：PDF/Word/Excel 图标 → 分块 → 向量化 → 命中检索
|
||||
- 标语：让 AI 通晓"本地法"
|
||||
|
||||
**配音**
|
||||
> 自建检索增强知识库，把法规库、案例库、内部制度一次入库。向量检索毫秒响应，让 AI 从博而不专，转向通晓本地法。
|
||||
|
||||
**字幕**：自建 RAG 知识库 · 通晓"本地法"
|
||||
|
||||
---
|
||||
|
||||
## S5 优势五 · 一键生成汇报（0:44–0:54，10s）
|
||||
|
||||
**画面**
|
||||
- 输入主题 → 自动生成 PPTX 的流程演示（卡片逐页翻出）
|
||||
- 标注：16:9 / 4:3 / 竖版 · 原生可编辑 · 全程本地无需联网
|
||||
- 时间对比：以天计 → 以分钟计（数字 count-up）
|
||||
|
||||
**配音**
|
||||
> 智能 PPT 生成引擎，输入主题即可一键生成专业汇报材料，全程本地完成。制作周期，由以天计，压缩到以分钟计。
|
||||
|
||||
**字幕**：一键生成汇报材料 · 本地完成 · 提质增效
|
||||
|
||||
---
|
||||
|
||||
## S6 优势二 · 独立部署 + 治理闭环（0:54–1:04，10s）
|
||||
|
||||
**画面**
|
||||
- 边缘算力机箱体图标 → "到场即通电、通电即可用"
|
||||
- `08_overview.png` / `02_dashboard.png` / `03_analytics.png` 三联画
|
||||
- 关键词：开箱即用 · 本部门专属 · 部署以天计
|
||||
|
||||
**配音**
|
||||
> 一体化交付，边缘算力机预装即用，本部门独立部署，开箱即用。配套管理后台，数据总览、用量管控、人员治理，一目了然。
|
||||
|
||||
**字幕**：开箱即用 · 本部门专属 · 治理闭环
|
||||
|
||||
---
|
||||
|
||||
## S7 收尾 · 标语与网址（1:04–1:12，8s）
|
||||
|
||||
**画面**
|
||||
- 回到深蓝底 + 金线
|
||||
- 主标语：安全 · 专属 · 易用
|
||||
- 网址高亮：gov.opc8ai.com
|
||||
- 落版：法治日报社 出品
|
||||
|
||||
**配音**
|
||||
> 法智通——安全、专属、易用。让人工智能，成为法治工作的得力助手。访问 gov.opc8ai.com，了解更多。
|
||||
|
||||
**字幕**：gov.opc8ai.com · 法治日报社出品
|
||||
|
||||
---
|
||||
|
||||
## 配音全文（送 TTS 用，约 295 字）
|
||||
|
||||
> 法治日报社，四十余年深耕政法领域。如今，将这份专业，注入人工智能——法智通，政法行业人工智能应用平台。
|
||||
> 安全保密，是政法工作的第一要务。法智通坚持数据不出域、算力在身边——大模型与知识库全部部署在机构本地，内外网物理隔离，配合多级权限与全量审计，每一次操作可追溯、可倒查。
|
||||
> 平台预置数十款政法专用应用，覆盖公文写作、法规问答、案件研判、来信回复、舆情宣传。即插即用，全生命周期管理，从源头保证内容合规。
|
||||
> 自建检索增强知识库，把法规库、案例库、内部制度一次入库。向量检索毫秒响应，让 AI 从博而不专，转向通晓本地法。
|
||||
> 智能 PPT 生成引擎，输入主题即可一键生成专业汇报材料，全程本地完成。制作周期，由以天计，压缩到以分钟计。
|
||||
> 一体化交付，边缘算力机预装即用，本部门独立部署，开箱即用。配套管理后台，数据总览、用量管控、人员治理，一目了然。
|
||||
> 法智通——安全、专属、易用。让人工智能，成为法治工作的得力助手。访问 gov.opc8ai.com，了解更多。
|
||||
@@ -0,0 +1,142 @@
|
||||
# 法智通宣传片 · 时间轴设计（TIMELINE.md）
|
||||
|
||||
总时长：72s（无配音时可调整为 60s 紧凑版）
|
||||
帧率：30fps
|
||||
分辨率：1920×1080
|
||||
|
||||
---
|
||||
|
||||
## 全局时间轴（7 个主场景 Composition）
|
||||
|
||||
| Scene | 时间段 | 时长 | 主视觉 | 关键动效 |
|
||||
|-------|------------|------|--------------------------------|----------------------------|
|
||||
| S1 | 0:00–0:08 | 8s | 法治日报背书 + logo | 金线擦出 + 文字逐行入场 |
|
||||
| S2 | 0:08–0:22 | 14s | 架构图 + 安全关键词 | 高亮弹出 + 审计日志叠加 |
|
||||
| S3 | 0:22–0:34 | 12s | AI 应用中心网格 | 推进入场 + 卡片网格铺开 |
|
||||
| S4 | 0:34–0:44 | 10s | 知识库文档流入 | 图标流动 + 向量化动效 |
|
||||
| S5 | 0:44–0:54 | 10s | PPT 生成流程 | 卡片翻出 + 数字 count-up |
|
||||
| S6 | 0:54–1:04 | 10s | 算力机 + 管理后台三联画 | 箱体图标 + 三屏并排渐显 |
|
||||
| S7 | 1:04–1:12 | 8s | 标语 + 网址 + 出品方 | 回归深蓝底 + 金线收束 |
|
||||
|
||||
---
|
||||
|
||||
## 各帧内部 Track 层级约定（统一）
|
||||
|
||||
```
|
||||
track 0: 背景（渐变/纯色，全程）
|
||||
track 1: 主视觉元素（截图/架构图/图标）
|
||||
track 2: 文字标题
|
||||
track 3: 文字副标题/注释
|
||||
track 4: 装饰线条/网格/高亮框
|
||||
track 5: 字幕条（底部安全区，与配音同步时启用）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## S1 开场（compositions/s1-intro.html）
|
||||
|
||||
**时长**: 8s (0–8)
|
||||
**Track 布局**:
|
||||
- Track 0: 深蓝渐变背景 `#0A1A33 → #10243F`，全程
|
||||
- Track 1: 金线自中心向两侧擦出（`scaleX 0→1`，0.5–2s）
|
||||
- Track 2: 「法治日报社 出品」（2–4s，y: 24→0, opacity 0→1）
|
||||
- Track 3: 「四十余年深耕政法领域」（4–6s，同上）
|
||||
- Track 1: logo SVG/图片「法智通 · 政法行业人工智能应用平台」（6–8s，放大入场）
|
||||
|
||||
---
|
||||
|
||||
## S2 安全第一（compositions/s2-security.html）
|
||||
|
||||
**时长**: 14s (0–14)
|
||||
**Track 布局**:
|
||||
- Track 0: 深蓝底
|
||||
- Track 1: `architecture.png` 居中浮现（0–14s，opacity 0→0.4，模糊背景）
|
||||
- Track 1: 金线勾勒"边缘算力机"区域（2–4s）
|
||||
- Track 2: 关键词依次弹出（4–10s）：
|
||||
- 「数据不出域」（警示红 `#C0392B`，4–6s）
|
||||
- 「算力在身边」（金色，6–8s）
|
||||
- 「内外网物理隔离」（金色，8–10s）
|
||||
- Track 1: 右下角叠加 `11_audit.png` 小窗（10–12s）+ `00_login.png`（12–14s）
|
||||
|
||||
---
|
||||
|
||||
## S3 应用即插即用（compositions/s3-apps.html）
|
||||
|
||||
**时长**: 12s (0–12)
|
||||
**Track 布局**:
|
||||
- Track 0: 深蓝底
|
||||
- Track 1: `01_store.png` 主视觉，向左推进入场（x: 200→0，0–2s）
|
||||
- Track 2: 标题「数十款政法专用应用」（2–4s）
|
||||
- Track 1: 应用卡片网格（模拟 6 张卡片，金色徽章）铺开（4–8s，stagger 0.1s）
|
||||
- Track 1: `09_chat.png` / `04_create.png` 快闪切换（8–10s / 10–12s）
|
||||
|
||||
---
|
||||
|
||||
## S4 自建知识库（compositions/s4-knowledge.html）
|
||||
|
||||
**时长**: 10s (0–10)
|
||||
**Track 布局**:
|
||||
- Track 0: 深蓝底
|
||||
- Track 1: `05_knowledge.png` 界面作为背景（opacity 0.3，全程）
|
||||
- Track 1: 文档图标（PDF/Word/Excel）从左流入"知识库"容器（2–6s，stagger）
|
||||
- Track 4: 分块 → 向量化 → 检索命中 的流程示意（简化图标动画，6–8s）
|
||||
- Track 2: 标语「让 AI 通晓"本地法"」（8–10s）
|
||||
|
||||
---
|
||||
|
||||
## S5 一键生成汇报（compositions/s5-ppt.html）
|
||||
|
||||
**时长**: 10s (0–10)
|
||||
**Track 布局**:
|
||||
- Track 0: 深蓝底
|
||||
- Track 1: 输入框 → 生成按钮点击 → PPTX 卡片逐页翻出（0–6s）
|
||||
- Track 2: 标注「16:9 / 4:3 · 原生可编辑 · 全程本地」（6–8s）
|
||||
- Track 1: 时间对比数字 count-up「7 天 → 5 分钟」（8–10s，大字号金色）
|
||||
|
||||
---
|
||||
|
||||
## S6 独立部署 + 治理（compositions/s6-deploy.html）
|
||||
|
||||
**时长**: 10s (0–10)
|
||||
**Track 布局**:
|
||||
- Track 0: 深蓝底
|
||||
- Track 1: 边缘算力机箱体图标 + 标注「到场即通电」（0–4s）
|
||||
- Track 1: 三联画并排渐显（4–10s）：
|
||||
- 左：`08_overview.png`（平台总览）
|
||||
- 中：`02_dashboard.png`（仪表盘）
|
||||
- 右：`03_analytics.png`（用量分析）
|
||||
- Track 2: 关键词「开箱即用 · 本部门专属 · 治理闭环」（8–10s）
|
||||
|
||||
---
|
||||
|
||||
## S7 收尾（compositions/s7-outro.html）
|
||||
|
||||
**时长**: 8s (0–8)
|
||||
**Track 布局**:
|
||||
- Track 0: 回到深蓝底 + 金线（0–2s，与 S1 呼应）
|
||||
- Track 2: 主标语「安全 · 专属 · 易用」（2–4s，大字号）
|
||||
- Track 2: 网址「gov.opc8ai.com」（4–6s，金色高亮）
|
||||
- Track 3: 落版「法治日报社 出品」（6–8s）
|
||||
|
||||
---
|
||||
|
||||
## 全局 CSS 变量（写入每个 composition 的 `<style>`）
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-deep: #0A1A33;
|
||||
--bg-panel: #10243F;
|
||||
--brand-blue: #1E5BC6;
|
||||
--gold: #D4A437;
|
||||
--seal-red: #C0392B;
|
||||
--text-hi: #F2F6FC;
|
||||
--text-lo: #9DB2CE;
|
||||
--line: #2A436B;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 字幕占位（待配音时激活）
|
||||
|
||||
每个 composition 预留 `track 5` 的字幕 `<div>`，初始 `display: none`，配音就位后再启用。
|
||||
@@ -0,0 +1,86 @@
|
||||
# 法智通宣传片 · 设计系统（frame.md）
|
||||
|
||||
> 政法行业 AI 平台宣传片视觉语言。基调：权威、安全、庄重。
|
||||
> 与产品真实 UI（深色专业界面）一致，避免轻浮的消费级动效。
|
||||
|
||||
## 1. 画幅与节奏
|
||||
|
||||
- 画幅：16:9，1920×1080（官网/汇报场景横屏）
|
||||
- 时长目标：60–75s（mid）
|
||||
- 节奏：稳。镜头切换克制，转场以「推进/叠化」为主，禁止花哨弹跳
|
||||
- 配音：中文，正式播报语速（约 4.5 字/秒）→ 65s 约 290 字
|
||||
|
||||
## 2. 配色（政务风：深蓝 + 金 + 警示红）
|
||||
|
||||
| 角色 | 变量 | 色值 | 用途 |
|
||||
| ----------- | --------------- | ----------- | ---------------------------- |
|
||||
| 背景主色 | `--bg-deep` | `#0A1A33` | 深海蓝，全片底色 |
|
||||
| 背景次色 | `--bg-panel` | `#10243F` | 卡片/面板底 |
|
||||
| 主品牌蓝 | `--brand-blue` | `#1E5BC6` | 主按钮、高亮线、进度 |
|
||||
| 权威金 | `--gold` | `#D4A437` | 标题点缀、强调、徽章 |
|
||||
| 警示红 | `--seal-red` | `#C0392B` | 「安全/涉密」相关强调（克制）|
|
||||
| 主文字 | `--text-hi` | `#F2F6FC` | 标题、主文案 |
|
||||
| 次文字 | `--text-lo` | `#9DB2CE` | 注释、副标题 |
|
||||
| 分隔/描边 | `--line` | `#2A436B` | 边框、网格线 |
|
||||
|
||||
> 注：警示红仅用于「数据不出域 / 内外网隔离」这一安全主线的关键强调，
|
||||
> 全片出现不超过 2–3 次，避免削弱庄重感。
|
||||
|
||||
## 3. 字体
|
||||
|
||||
- 中文标题：思源黑体 / 系统 `"PingFang SC", "Source Han Sans SC"`，Bold
|
||||
- 中文正文：同上 Regular/Medium
|
||||
- 数字与英文：`"DIN Alternate", "Helvetica Neue"`，用于数据/版本号
|
||||
- 字号梯度（1080p 基准）：
|
||||
- 主标题 H1：72–96px
|
||||
- 分镜标题 H2：48–56px
|
||||
- 正文/字幕：32–36px
|
||||
- 注释：24px
|
||||
|
||||
## 4. 动效语言（GSAP）
|
||||
|
||||
- 入场：`y: 24 → 0`，`opacity: 0 → 1`，`duration 0.6`，`ease: power2.out`
|
||||
- 强调：金色下划线由左至右擦出（`scaleX 0 → 1`，`transformOrigin left`）
|
||||
- 转场：整屏向左推进（`x` 位移）或叠化（`opacity`），时长 0.5–0.8
|
||||
- 数据：数字 count-up（确定性，不用随机）
|
||||
- 禁止：弹跳 `back.out` 过冲、旋转入场、霓虹辉光
|
||||
|
||||
## 5. 字幕规范
|
||||
|
||||
- 位置：底部安全区，距底 80px
|
||||
- 样式：半透明深色衬底条 `rgba(8,18,36,0.72)` + 主文字白
|
||||
- 每屏 ≤ 18 字，与配音分句对齐
|
||||
|
||||
## 6. 素材映射（assets/capture/）
|
||||
|
||||
| 文件 | 内容 | 用于分镜 |
|
||||
| -------------------- | -------------- | ---------------------- |
|
||||
| `architecture.png` | 平台架构图 | S2 安全架构 / 数据不出域 |
|
||||
| `00_login.png` | 登录认证 | S2 多级权限 |
|
||||
| `01_store.png` | AI 应用中心 | S3 应用即插即用（主视觉）|
|
||||
| `02_dashboard.png` | 仪表盘 | S6 管理后台治理 |
|
||||
| `03_analytics.png` | 用量分析 | S6 用量管控 |
|
||||
| `04_create.png` | 创建应用 | S3 应用全生命周期 |
|
||||
| `05_knowledge.png` | 知识库 | S4 自建 RAG 知识库 |
|
||||
| `06_apps.png` | 应用管理 | S3 数十款政法应用 |
|
||||
| `07_users.png` | 人员管理 | S6 人员治理 |
|
||||
| `08_overview.png` | 平台总览 | S6 数据总览 |
|
||||
| `09_chat.png` | 智能对话 | S3 法规问答 |
|
||||
| `10_models.png` | 模型管理 | S2 国产模型本地化 |
|
||||
| `11_audit.png` | 审计日志 | S2 全量审计可追溯 |
|
||||
|
||||
## 7. 全片结构（五大优势主线 + 头尾）
|
||||
|
||||
```
|
||||
S1 开场 法治日报权威背书 → 法智通 logo 亮相 ~8s
|
||||
S2 优势一 安全第一·数据不出域·内外网物理隔离 ~14s ← 主线最重
|
||||
S3 优势三 政法专业沉淀·应用即插即用 ~12s
|
||||
S4 优势四 自建知识库·AI 通晓"本地法" ~10s
|
||||
S5 优势五 一键生成汇报材料·提质增效 ~10s
|
||||
S6 优势二 独立部署·开箱即用 + 管理后台治理闭环 ~10s
|
||||
S7 收尾 标语 + 网址 gov.opc8ai.com + 出品方 ~8s
|
||||
合计 ~72s
|
||||
```
|
||||
|
||||
> 叙事顺序刻意把「优势二·独立部署」后置到 S6，与管理后台治理合并，
|
||||
> 让「安全」作为开场强钩、「交付落地」作为收束，形成 安全→能力→落地 的逻辑闭环。
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
#!/bin/bash
|
||||
# 批量修复 compositions 的 HyperFrames 错误
|
||||
|
||||
cd /Users/freedak/Documents/AIProjects/GovAI/videos/fazhitong-promo/compositions
|
||||
|
||||
# 修复所有 compositions：添加 data-composition-id, data-width, data-height 到 body
|
||||
for file in s*.html; do
|
||||
id=$(basename "$file" .html)
|
||||
# 在 <body 后面插入属性
|
||||
sed -i '' "s/<body>/<body data-composition-id=\"$id\" data-width=\"1920\" data-height=\"1080\">/g" "$file"
|
||||
# 修复资源路径：../assets/ → assets/
|
||||
sed -i '' 's|../assets/|assets/|g' "$file"
|
||||
done
|
||||
|
||||
echo "批量修复完成"
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>法智通 · 政法行业人工智能应用平台宣传片</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #0A1A33;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clip {
|
||||
position: absolute;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-composition-id="main" data-width="1920" data-height="1080">
|
||||
<!-- S1: 开场 (0–8s) -->
|
||||
<div data-hf-id="hf-dxqb" class="clip" id="scene-intro" data-composition-id="s1-intro" data-start="0" data-duration="8" data-track-index="0" data-composition-src="compositions/s1-intro.html">
|
||||
</div>
|
||||
|
||||
<!-- S2: 安全第一 (8–22s) -->
|
||||
<div data-hf-id="hf-m6w6" class="clip" id="scene-security" data-composition-id="s2-security" data-start="8" data-duration="14" data-track-index="0" data-composition-src="compositions/s2-security.html">
|
||||
</div>
|
||||
|
||||
<!-- S3: 应用即插即用 (22–34s) -->
|
||||
<div data-hf-id="hf-wwps" class="clip" id="scene-apps" data-composition-id="s3-apps" data-start="22" data-duration="12" data-track-index="0" data-composition-src="compositions/s3-apps.html">
|
||||
</div>
|
||||
|
||||
<!-- S4: 自建知识库 (34–44s) -->
|
||||
<div data-hf-id="hf-aeep" class="clip" id="scene-knowledge" data-composition-id="s4-knowledge" data-start="34" data-duration="10" data-track-index="0" data-composition-src="compositions/s4-knowledge.html">
|
||||
</div>
|
||||
|
||||
<!-- S5: 一键生成汇报 (44–54s) -->
|
||||
<div data-hf-id="hf-qpau" class="clip" id="scene-ppt" data-composition-id="s5-ppt" data-start="44" data-duration="10" data-track-index="0" data-composition-src="compositions/s5-ppt.html">
|
||||
</div>
|
||||
|
||||
<!-- S6: 独立部署与治理 (54–64s) -->
|
||||
<div data-hf-id="hf-boce" class="clip" id="scene-deploy" data-composition-id="s6-deploy" data-start="54" data-duration="10" data-track-index="0" data-composition-src="compositions/s6-deploy.html">
|
||||
</div>
|
||||
|
||||
<!-- S7: 收尾 (64–72s) -->
|
||||
<div data-hf-id="hf-87hc" class="clip" id="scene-outro" data-composition-id="s7-outro" data-start="64" data-duration="8" data-track-index="0" data-composition-src="compositions/s7-outro.html">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 注册主时间轴
|
||||
window.__timelines = window.__timelines || {};
|
||||
const mainTimeline = gsap.timeline({ paused: true });
|
||||
window.__timelines["main"] = mainTimeline;
|
||||
|
||||
// 总时长 72 秒
|
||||
mainTimeline.to({}, { duration: 72 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"id": "fazhitong-promo",
|
||||
"name": "fazhitong-promo",
|
||||
"createdAt": "2026-06-27T12:16:33.032Z"
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "fazhitong-promo",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "npx --yes hyperframes@0.7.14 preview",
|
||||
"check": "npx --yes hyperframes@0.7.14 lint && npx --yes hyperframes@0.7.14 validate && npx --yes hyperframes@0.7.14 inspect",
|
||||
"render": "npx --yes hyperframes@0.7.14 render",
|
||||
"publish": "npx --yes hyperframes@0.7.14 publish"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
法治日报社，四十余年深耕政法领域。如今，将这份专业，注入人工智能——法智通，政法行业人工智能应用平台。
|
||||
安全保密，是政法工作的第一要务。法智通坚持数据不出域、算力在身边——大模型与知识库全部部署在机构本地，内外网物理隔离，配合多级权限与全量审计，每一次操作可追溯、可倒查。
|
||||
平台预置数十款政法专用应用，覆盖公文写作、法规问答、案件研判、来信回复、舆情宣传。即插即用，全生命周期管理，从源头保证内容合规。
|
||||
自建检索增强知识库，把法规库、案例库、内部制度一次入库。向量检索毫秒响应，让 AI 从博而不专，转向通晓本地法。
|
||||
智能 PPT 生成引擎，输入主题即可一键生成专业汇报材料，全程本地完成。制作周期，由以天计，压缩到以分钟计。
|
||||
一体化交付，边缘算力机预装即用，本部门独立部署，开箱即用。配套管理后台，数据总览、用量管控、人员治理，一目了然。
|
||||
法智通——安全、专属、易用。让人工智能，成为法治工作的得力助手。访问 gov.opc8ai.com，了解更多。
|
||||
Reference in New Issue
Block a user