Files
vf_react/public/htmls/诡秘之主.html
2025-10-11 16:16:02 +08:00

581 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>诡秘之主 - IP全产业链投资分析</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- DaisyUI -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom Styles -->
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
}
.mystic-bg {
background: linear-gradient(135deg, #1a1c3d 0%, #2d1b69 50%, #0f0c29 100%);
position: relative;
overflow: hidden;
}
.mystic-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
z-index: 0;
}
.content-wrapper {
position: relative;
z-index: 1;
}
.card-mystic {
background-color: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.text-gradient {
background: linear-gradient(to right, #a78bfa, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.timeline-dot {
box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.float-animation {
animation: float 4s ease-in-out infinite;
}
</style>
</head>
<body class="mystic-bg text-gray-100 min-h-screen">
<div class="content-wrapper container mx-auto px-4 py-8 max-w-6xl">
<!-- Header Section -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-gradient">诡秘之主</h1>
<p class="text-xl text-purple-200 max-w-3xl mx-auto">从网络文学到全球跨媒介IP矩阵的投资价值分析</p>
<div class="mt-6 flex justify-center space-x-2">
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-sm">克苏鲁神话</span>
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-sm">蒸汽朋克</span>
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-sm">IP全产业链</span>
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-sm">全球发行</span>
</div>
</div>
<!-- Concept Overview -->
<div class="card-mystic rounded-xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-book-open text-white"></i>
</div>
<h2 class="text-2xl font-bold">概念事件</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-purple-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="font-bold text-purple-300 mb-2">背景</h3>
<p class="text-sm">《诡秘之主》是阅文集团旗下白金作家"爱潜水的乌贼"创作的西方奇幻小说融合克苏鲁神话、蒸汽朋克与SCP元素<span class="text-yellow-300 font-bold">2024年被大英图书馆永久收藏</span>,成为首部入藏的中国网文。</p>
</div>
<div class="bg-purple-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="font-bold text-purple-300 mb-2">催化事件</h3>
<ul class="text-sm space-y-2">
<li><span class="text-yellow-300">2024年3月</span>:同名游戏(快手"弹指宇宙"开发获版号TapTap评分8.1分</li>
<li><span class="text-yellow-300">2025年6月28日</span>动画全球7国语言同步上线覆盖190国</li>
<li><span class="text-yellow-300">2025年7月</span>阅文衍生品GMV突破5亿元卡牌占2亿</li>
</ul>
</div>
<div class="bg-purple-900 bg-opacity-30 p-4 rounded-lg">
<h3 class="font-bold text-purple-300 mb-2">时间轴</h3>
<ul class="text-sm space-y-2">
<li><span class="text-yellow-300">2023年</span>小说完结4年仍霸榜起点完结榜TOP1</li>
<li><span class="text-yellow-300">2024年Q1</span>:游戏版号过审,动画化启动</li>
<li><span class="text-yellow-300">2025年H2</span>:动画上线+衍生品全球发售</li>
</ul>
</div>
</div>
</div>
<!-- Core Viewpoints -->
<div class="card-mystic rounded-xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-lightbulb text-white"></i>
</div>
<h2 class="text-2xl font-bold">核心观点摘要</h2>
</div>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3">
<div class="w-4 h-4 rounded-full bg-purple-500 timeline-dot"></div>
</div>
<div>
<h3 class="font-bold text-lg text-purple-300">阶段判断</h3>
<p class="text-sm">从"单一文学IP"升级为<span class="text-yellow-300 font-bold">"全球跨媒介IP矩阵"</span>,进入<span class="text-yellow-300 font-bold">衍生品放量+游戏变现</span>的基本面驱动阶段。</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3">
<div class="w-4 h-4 rounded-full bg-purple-500 timeline-dot"></div>
</div>
<div>
<h3 class="font-bold text-lg text-purple-300">核心驱动力</h3>
<p class="text-sm">阅文<span class="text-yellow-300">"IP工业化"</span>能力动画产能提升3倍+衍生品毛利率<span class="text-yellow-300 font-bold">60%+</span>叠加快手游戏2025年上线预期。</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3">
<div class="w-4 h-4 rounded-full bg-purple-500 timeline-dot"></div>
</div>
<div>
<h3 class="font-bold text-lg text-purple-300">未来潜力</h3>
<p class="text-sm">对标《斗罗大陆》(年衍生品收入<span class="text-yellow-300 font-bold">10亿+</span>《诡秘之主》生命周期或延长10年以上。</p>
</div>
</div>
</div>
</div>
<!-- Market Analysis -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div class="card-mystic rounded-xl p-6 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-chart-line text-white"></i>
</div>
<h2 class="text-2xl font-bold">核心驱动力</h2>
</div>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-2 text-purple-400">
<i class="fas fa-gem"></i>
</div>
<div>
<h3 class="font-bold text-purple-300">内容稀缺性</h3>
<p class="text-sm">克苏鲁题材国内空白Steam类用户渗透率仅5%(伽马数据),填补市场缺口。</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-2 text-purple-400">
<i class="fas fa-industry"></i>
</div>
<div>
<h3 class="font-bold text-purple-300">工业化能力</h3>
<p class="text-sm">阅文动画年产能从<span class="text-yellow-300">6部→20部</span>2025年目标单部成本降至<span class="text-yellow-300">500万元</span>传统1/3</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-2 text-purple-400">
<i class="fas fa-share-alt"></i>
</div>
<div>
<h3 class="font-bold text-purple-300">渠道杠杆</h3>
<p class="text-sm">腾讯系流量微信读书5000万MAU+快手游戏分发TapTap预约<span class="text-yellow-300">50万+</span>)。</p>
</div>
</div>
</div>
</div>
<div class="card-mystic rounded-xl p-6 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-fire text-white"></i>
</div>
<h2 class="text-2xl font-bold">市场热度与预期差</h2>
</div>
<div class="space-y-4">
<div>
<h3 class="font-bold text-purple-300 mb-2">市场热度</h3>
<ul class="text-sm space-y-1">
<li><span class="text-yellow-300">新闻热度</span>2025年6月动画上线当日微博话题阅读量2.3亿B站预告片播放800万</li>
<li><span class="text-yellow-300">研报密集度</span>2025年7月5篇中金/中信报告提及2024年同期仅1篇</li>
</ul>
</div>
<div>
<h3 class="font-bold text-purple-300 mb-2">预期差</h3>
<div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg">
<p class="text-sm mb-2"><span class="text-yellow-300">市场认知</span>:仅视为"小说改编动画"</p>
<p class="text-sm"><span class="text-yellow-300">忽略点</span>卡牌业务毛利率60%高于影视的30%2025年计划推出308款设计《庆余年》仅120款</p>
</div>
</div>
</div>
</div>
</div>
<!-- Catalysts and Future Path -->
<div class="card-mystic rounded-xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-rocket text-white"></i>
</div>
<h2 class="text-2xl font-bold">催化剂与未来发展路径</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold text-lg text-purple-300 mb-3">近期催化剂3-6个月</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center">
<span class="text-xs font-bold text-gray-900">1</span>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">2025年8月</span>:动画第二季制作决定(阅文业绩会透露)</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center">
<span class="text-xs font-bold text-gray-900">2</span>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">2025年Q4</span>:快手游戏《诡秘之主》上线,首月流水或达<span class="text-yellow-300 font-bold">1亿+</span></p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center">
<span class="text-xs font-bold text-gray-900">3</span>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">2025年10月</span>:全球卡牌发售(亚马逊/日本CCC集团渠道</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-bold text-lg text-purple-300 mb-3">长期路径</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 text-purple-400">
<i class="fas fa-calendar-alt"></i>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">2025-2026年</span>:游戏+卡牌贡献收入<span class="text-yellow-300 font-bold">3-5亿</span>阅文衍生品收入占比从5%→15%</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 text-purple-400">
<i class="fas fa-film"></i>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">2027年后</span>:影视化(电影/真人剧)+线下主题乐园(上海快闪店试点)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Industry Chain Analysis -->
<div class="card-mystic rounded-xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-sitemap text-white"></i>
</div>
<h2 class="text-2xl font-bold">产业链与核心公司深度剖析</h2>
</div>
<div class="mb-6">
<h3 class="font-bold text-lg text-purple-300 mb-3">产业链图谱</h3>
<div class="bg-purple-900 bg-opacity-30 p-4 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div>
<div class="font-bold text-yellow-300 mb-2">上游</div>
<div class="text-sm">阅文集团IP持有</div>
</div>
<div>
<div class="font-bold text-yellow-300 mb-2">中游</div>
<div class="text-sm space-y-1">
<div>动画制作:腾讯动漫</div>
<div>游戏开发:快手弹指宇宙</div>
<div>衍生品:广博股份</div>
</div>
</div>
<div>
<div class="font-bold text-yellow-300 mb-2">下游</div>
<div class="text-sm space-y-1">
<div>国内腾讯视频、B站、天猫</div>
<div>海外Disney+、Amazon</div>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-bold text-lg text-purple-300 mb-3">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<thead>
<tr class="text-purple-300">
<th class="text-left">公司</th>
<th class="text-left">角色</th>
<th class="text-left">进展</th>
<th class="text-left">风险</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-purple-800">
<td class="font-bold text-yellow-300">阅文集团</td>
<td>IP源头+运营</td>
<td>动画上线+卡牌GMV<span class="text-yellow-300">2亿</span></td>
<td>游戏流水不及预期</td>
</tr>
<tr class="border-b border-purple-800">
<td class="font-bold text-yellow-300">快手</td>
<td>游戏开发商</td>
<td>TapTap评分8.1,未启动预约</td>
<td>版号后延期上线</td>
</tr>
<tr>
<td class="font-bold text-yellow-300">广博股份</td>
<td>衍生品制造商</td>
<td>获正版授权2025年Q3推出盲盒</td>
<td>产能不足(越南工厂饱和)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Risks and Challenges -->
<div class="card-mystic rounded-xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
<h2 class="text-2xl font-bold">潜在风险与挑战</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-red-900 bg-opacity-20 p-4 rounded-lg border border-red-800">
<h3 class="font-bold text-red-300 mb-2">技术风险</h3>
<p class="text-sm">UE5游戏优化难度高<span class="text-yellow-300">中低端机型适配</span>或影响流水。</p>
</div>
<div class="bg-red-900 bg-opacity-20 p-4 rounded-lg border border-red-800">
<h3 class="font-bold text-red-300 mb-2">商业化风险</h3>
<p class="text-sm">卡牌定价<span class="text-yellow-300">99元/盒</span>高于行业均价60元需验证粉丝付费意愿。</p>
</div>
<div class="bg-red-900 bg-opacity-20 p-4 rounded-lg border border-red-800">
<h3 class="font-bold text-red-300 mb-2">竞争风险</h3>
<p class="text-sm">同类IP《道诡异仙》动画2025年Q4上线分流用户</p>
</div>
<div class="bg-red-900 bg-opacity-20 p-4 rounded-lg border border-red-800">
<h3 class="font-bold text-red-300 mb-2">信息矛盾</h3>
<p class="text-sm">部分研报称"动画已全球上线",但路演透露<span class="text-yellow-300">仅第一季完成</span></p>
</div>
</div>
</div>
<!-- Investment Conclusion -->
<div class="card-mystic rounded-xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-coins text-white"></i>
</div>
<h2 class="text-2xl font-bold">综合结论与投资启示</h2>
</div>
<div class="mb-6">
<div class="bg-gradient-to-r from-purple-900 to-indigo-900 p-4 rounded-lg mb-4">
<h3 class="font-bold text-lg text-yellow-300 mb-2">阶段判断</h3>
<p class="text-sm"><span class="text-yellow-300 font-bold">基本面驱动初期</span>动画验证IP价值→游戏/衍生品放量)</p>
</div>
<h3 class="font-bold text-lg text-purple-300 mb-3">投资价值方向</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
<span class="text-xs font-bold text-gray-900">1</span>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">直接受益</span><span class="text-green-300 font-bold">阅文集团</span>IP全产业链变现2025年PE<span class="text-yellow-300">18倍</span>低于历史中枢25倍</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1 mr-3 w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
<span class="text-xs font-bold text-gray-900">2</span>
</div>
<div>
<p class="text-sm"><span class="text-yellow-300">弹性标的</span><span class="text-green-300 font-bold">广博股份</span>(盲盒毛利率<span class="text-yellow-300">50%+</span>2025年IP收入占比或达<span class="text-yellow-300">30%</span></p>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-bold text-lg text-purple-300 mb-3">关键跟踪指标</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg text-center">
<div class="text-yellow-300 font-bold mb-1">游戏预约量</div>
<div class="text-xs">TapTap页面开启后7日预约数需>100万</div>
</div>
<div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg text-center">
<div class="text-yellow-300 font-bold mb-1">卡牌预售数据</div>
<div class="text-xs">天猫旗舰店首周销量(需>5万套</div>
</div>
<div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg text-center">
<div class="text-yellow-300 font-bold mb-1">动画第二季官宣</div>
<div class="text-xs">阅文业绩会或腾讯动漫发布会确认</div>
</div>
</div>
<div class="mt-4 bg-red-900 bg-opacity-20 p-3 rounded-lg border border-red-800">
<p class="text-sm"><span class="text-red-300 font-bold">风险提示</span>若游戏延期至2026年IP热度或衰减需警惕估值回调。</p>
</div>
</div>
</div>
<!-- Related Stocks Table -->
<div class="card-mystic rounded-xl p-6 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3">
<i class="fas fa-chart-bar text-white"></i>
</div>
<h2 class="text-2xl font-bold">关联股票</h2>
</div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="text-purple-300">
<th class="text-left">股票名称</th>
<th class="text-left">项目</th>
<th class="text-left">消息来源</th>
<th class="text-left">关联原因</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-purple-800 hover:bg-purple-900 hover:bg-opacity-20">
<td class="font-bold text-yellow-300">广博股份</td>
<td>《诡秘之主》IP正版授权及纳入IP衍生品开发体系</td>
<td><span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded text-xs">公司公告</span></td>
<td>明确获得《诡秘之主》IP正版授权并将其纳入公司IP衍生品开发体系</td>
</tr>
<tr class="border-b border-purple-800 hover:bg-purple-900 hover:bg-opacity-20">
<td class="font-bold text-yellow-300">三七互娱</td>
<td>《斗破苍穹》《诡秘之主》《斗罗大陆》等IP改编权</td>
<td><span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded text-xs">公司公告</span></td>
<td>获得多个知名IP的改编权包括《诡秘之主》</td>
</tr>
<tr class="border-b border-purple-800 hover:bg-purple-900 hover:bg-opacity-20">
<td class="font-bold text-yellow-300">上海电影</td>
<td>上影元收购阅文部分IP授权参与《诡秘之主》动画及周边开发</td>
<td><span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded text-xs">网络资料</span></td>
<td>旗下子公司参与《诡秘之主》动画及周边开发</td>
</tr>
<tr class="border-b border-purple-800 hover:bg-purple-900 hover:bg-opacity-20">
<td class="font-bold text-yellow-300">掌阅科技</td>
<td>《诡秘之主》电子版制作与发行权</td>
<td><span class="px-2 py-1 bg-yellow-900 bg-opacity-50 rounded text-xs">网络传闻</span></td>
<td>通过阅文集团授权获得《诡秘之主》电子版制作与发行权</td>
</tr>
<tr class="border-b border-purple-800 hover:bg-purple-900 hover:bg-opacity-20">
<td class="font-bold text-yellow-300">奥飞娱乐</td>
<td>潮玩手办授权预期</td>
<td><span class="px-2 py-1 bg-gray-700 rounded text-xs">未明确</span></td>
<td>潜在受益于《诡秘之主》IP潮玩手办授权</td>
</tr>
<tr class="hover:bg-purple-900 hover:bg-opacity-20">
<td class="font-bold text-yellow-300">姚记科技</td>
<td>卡牌IP销售预期</td>
<td><span class="px-2 py-1 bg-gray-700 rounded text-xs">未明确</span></td>
<td>潜在受益于《诡秘之主》IP卡牌销售</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Footer -->
<div class="mt-8 text-center text-sm text-purple-300">
<p>数据来源:公开资料整理 | 更新时间2025年7月</p>
<p class="mt-2">投资有风险,入市需谨慎</p>
</div>
</div>
<!-- Particles Background -->
<div id="particles-js" class="fixed inset-0 z-0"></div>
<!-- Particles.js -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
tsParticles.load("particles-js", {
fpsLimit: 60,
particles: {
color: {
value: "#a78bfa",
},
links: {
color: "#a78bfa",
distance: 150,
enable: true,
opacity: 0.2,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: true,
speed: 1,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 50,
},
opacity: {
value: 0.3,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 3 },
},
},
detectRetina: true,
});
});
</script>
</body>
</html>
```