vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 10.10线上最新代码提交

Browse Source
This commit is contained in:
zdl
2025-10-11 16:16:02 +08:00
parent 4d0dc109bc
commit 864844a52b
3338 changed files with 460147 additions and 152745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

543
public/htmls/华为抖音支付.html Normal file
View File

@@ -0,0 +1,543 @@
<!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>华为抖音支付概念分析</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" 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">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<style>
/* 自定义样式 */
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #667eea;
top: 6px;
left: -8px;
z-index: 1;
}
.timeline-line {
position: absolute;
width: 2px;
background-color: #e5e7eb;
top: 0;
bottom: 0;
left: 0;
}
.highlight-text {
background: linear-gradient(120deg, #a78bfa 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.table-container {
overflow-x: auto;
}
@media (max-width: 640px) {
.timeline-line {
left: 15px;
}
.timeline-dot::before {
left: 7px;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- 背景粒子效果 -->
<div id="particles-js" class="fixed inset-0 z-0"></div>
<!-- 主内容区 -->
<div class="relative z-10 container mx-auto px-4 py-8 max-w-6xl">
<!-- 页面标题 -->
<div class="text-center mb-10 mt-6">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">华为抖音支付概念分析</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">深度解析抖音支付生态布局、产业链机会与投资价值</p>
<div class="w-24 h-1 bg-purple-500 mx-auto mt-4 rounded-full"></div>
</div>
<!-- 概念事件卡片 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-calendar-alt text-purple-500 mr-3"></i>
概念事件
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">背景与催化事件</h3>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-purple-500 mr-2">•</span>
<span><strong class="text-gray-800">2024年4月</strong>：抖音关联公司收购联动优势100%股权，补齐线下收单牌照，为"碰一下"支付铺路。</span>
</li>
<li class="flex items-start">
<span class="text-purple-500 mr-2">•</span>
<span><strong class="text-gray-800">2025年1月</strong>：抖音支付注册资本从1.5亿元增至31.5亿元（增幅20倍），位列行业第四。</span>
</li>
<li class="flex items-start">
<span class="text-purple-500 mr-2">•</span>
<span><strong class="text-gray-800">2025年7月</strong>：抖音测试"碰一下"支付（NFC近场支付），类似支付宝"碰一下"。</span>
</li>
<li class="flex items-start">
<span class="text-purple-500 mr-2">•</span>
<span><strong class="text-gray-800">2025年7月</strong>：抖音生活服务"美食季"活动支付GMV破<strong class="text-purple-600">34亿元</strong>，覆盖1.9万商家。</span>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">时间轴</h3>
<div class="relative pl-6">
<div class="timeline-line"></div>
<div class="space-y-4">
<div class="timeline-dot pl-4">
<div class="text-sm font-semibold text-gray-800">2024年4月</div>
<div class="text-gray-600 text-sm">收购联动优势（线下收单牌照）</div>
<div class="text-gray-500 text-xs mt-1">打通线下支付闭环</div>
</div>
<div class="timeline-dot pl-4">
<div class="text-sm font-semibold text-gray-800">2025年1月</div>
<div class="text-gray-600 text-sm">注册资本增至31.5亿元</div>
<div class="text-gray-500 text-xs mt-1">资金实力跃升，合规性增强</div>
</div>
<div class="timeline-dot pl-4">
<div class="text-sm font-semibold text-gray-800">2025年7月</div>
<div class="text-gray-600 text-sm">测试"碰一下"支付</div>
<div class="text-gray-500 text-xs mt-1">对标支付宝，布局NFC支付场景</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点卡片 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-lightbulb text-yellow-500 mr-3"></i>
核心观点摘要
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg p-5">
<div class="text-lg font-semibold text-gray-800 mb-2">阶段判断</div>
<p class="text-gray-700">华为抖音支付概念处于<span class="highlight-text font-semibold">政策合规完成+技术测试启动</span>的拐点期，短期由抖音生态扩张驱动，长期需观察NFC支付渗透率。</p>
</div>
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg p-5">
<div class="text-lg font-semibold text-gray-800 mb-2">核心逻辑</div>
<p class="text-gray-700">抖音通过牌照补齐（联动优势）、资本增资（31.5亿）、技术迭代（碰一下支付）三线并进，试图复制支付宝"线下收单+生态补贴"路径，但需直面微信/支付宝的存量壁垒。</p>
</div>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-chart-line text-green-500 mr-3"></i>
核心逻辑与市场认知分析
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 mb-3">核心驱动力</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border-l-4 border-purple-500 pl-4 py-2">
<div class="font-semibold text-gray-800">牌照补齐</div>
<div class="text-gray-600 text-sm mt-1">收购联动优势后，抖音拥有银行卡收单+互联网支付全牌照，可开展线下扫码/NFC支付</div>
</div>
<div class="border-l-4 border-blue-500 pl-4 py-2">
<div class="font-semibold text-gray-800">资本弹药</div>
<div class="text-gray-600 text-sm mt-1">31.5亿注册资本（行业第四）支撑补贴战，参考支付宝"碰一下"曾投入40亿服务商激励</div>
</div>
<div class="border-l-4 border-green-500 pl-4 py-2">
<div class="font-semibold text-gray-800">场景闭环</div>
<div class="text-gray-600 text-sm mt-1">抖音生活服务2024年GMV达2000亿，支付渗透率提升可直接货币化（当前佣金率2.5%-6%）</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">市场热度与情绪</h3>
<div class="bg-gray-50 rounded-lg p-4">
<div class="mb-3">
<span class="font-semibold text-gray-800">新闻热度</span>
<div class="text-gray-600 text-sm mt-1">7月"碰一下"支付测试引发36氪、财联社等密集报道，但抖音官方未大规模宣传，情绪偏谨慎乐观。</div>
</div>
<div>
<span class="font-semibold text-gray-800">研报分歧</span>
<div class="text-gray-600 text-sm mt-1">申万宏源认为"线下推广或益于第三方支付"，但路演专家提示"抖音本地生活BD团队仅3500人，美团价格战下补贴压力大"。</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">预期差</h3>
<div class="bg-gray-50 rounded-lg p-4">
<div class="mb-3">
<span class="font-semibold text-gray-800">市场忽略点</span>
<div class="text-gray-600 text-sm mt-1">抖音支付增资后资金用途未明确（是否用于补贴？），而"碰一下"支付需硬件改造，落地速度可能低于预期。</div>
</div>
<div>
<span class="font-semibold text-gray-800">数据矛盾</span>
<div class="text-gray-600 text-sm mt-1">新闻称"碰一下"将复制支付宝激励模式，但路演显示抖音2024年本地生活亏损收窄但未盈利，补贴力度或受限。</div>
</div>
</div>
</div>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-rocket text-red-500 mr-3"></i>
关键催化剂与未来发展路径
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 mb-3">近期催化剂（3-6个月）</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gradient-to-r from-red-50 to-orange-50 rounded-lg p-4 border-l-4 border-red-400">
<div class="font-semibold text-gray-800 mb-1">"碰一下"支付试点城市扩张</div>
<div class="text-gray-600 text-sm">若抖音公布首批试点城市（如上海、成都）及商户补贴细则，将验证商业化决心。</div>
</div>
<div class="bg-gradient-to-r from-yellow-50 to-amber-50 rounded-lg p-4 border-l-4 border-yellow-400">
<div class="font-semibold text-gray-800 mb-1">Q3本地生活盈利节点</div>
<div class="text-gray-600 text-sm">浦燕子团队接管后，若2024年本地生活实现盈利（目标佣金覆盖4%补贴率），将强化支付场景价值。</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">长期路径</h3>
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-5">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="font-semibold text-gray-800 mb-2">2025年目标</div>
<div class="text-gray-600 text-sm">抖音商城GMV占比40%+搜索10%（泛商城50%），支付需支撑4.1万亿GMV（当前2.6万亿），NFC支付或成差异化抓手。</div>
</div>
<div>
<div class="font-semibold text-gray-800 mb-2">竞争壁垒</div>
<div class="text-gray-600 text-sm">需突破微信/支付宝的线下商户覆盖率（当前抖音商家85%与淘宝重叠，但线下POS改造率低）。</div>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司深度剖析 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-sitemap text-indigo-500 mr-3"></i>
产业链与核心公司深度剖析
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 mb-3">产业链图谱</h3>
<div class="bg-gray-50 rounded-lg p-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="text-center">
<div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-microchip text-2xl"></i>
</div>
<div class="font-semibold text-gray-800 mb-1">上游</div>
<div class="text-gray-600 text-sm">NFC芯片（优博讯参与华为手机钱包开发）、POS机具（拉卡拉鸿蒙生态合作）</div>
</div>
<div class="text-center">
<div class="bg-purple-100 text-purple-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-exchange-alt text-2xl"></i>
</div>
<div class="font-semibold text-gray-800 mb-1">中游</div>
<div class="text-gray-600 text-sm">支付服务商（威富通花瓣支付服务商）、收单牌照（联动优势已并入抖音）</div>
</div>
<div class="text-center">
<div class="bg-green-100 text-green-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-store text-2xl"></i>
</div>
<div class="font-semibold text-gray-800 mb-1">下游</div>
<div class="text-gray-600 text-sm">本地生活商户（天虹股份抖音首批零售合作方）</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead>
<tr class="bg-gray-100 text-gray-600 text-sm">
<th class="py-3 px-4 text-left">公司</th>
<th class="py-3 px-4 text-left">关联逻辑</th>
<th class="py-3 px-4 text-left">竞争优势</th>
<th class="py-3 px-4 text-left">风险点</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm">
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">拉卡拉</td>
<td class="py-3 px-4">鸿蒙支付生态合作，POS机具适配</td>
<td class="py-3 px-4">线下商户覆盖广</td>
<td class="py-3 px-4">抖音自建支付体系分流</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">优博讯</td>
<td class="py-3 px-4">华为手机钱包收款功能开发</td>
<td class="py-3 px-4">硬件绑定华为生态</td>
<td class="py-3 px-4">华为支付自身商业化缓慢</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">天虹股份</td>
<td class="py-3 px-4">抖音官方直播间+本地生活试点</td>
<td class="py-3 px-4">零售场景验证支付闭环</td>
<td class="py-3 px-4">抖音战略重心转向高客单价</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-exclamation-triangle text-red-500 mr-3"></i>
潜在风险与挑战
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-red-50 rounded-lg p-4 border-l-4 border-red-400">
<div class="font-semibold text-gray-800 mb-1">技术风险</div>
<div class="text-gray-600 text-sm">NFC支付需商户硬件升级，中小商家改造意愿低（路演专家：抖音低价商家留存率不足20%）。</div>
</div>
<div class="bg-orange-50 rounded-lg p-4 border-l-4 border-orange-400">
<div class="font-semibold text-gray-800 mb-1">商业化风险</div>
<div class="text-gray-600 text-sm">抖音支付当前佣金率2.5%-6%低于支付宝（0.6%-1.2%），盈利模型依赖广告补贴，可持续性存疑。</div>
</div>
<div class="bg-yellow-50 rounded-lg p-4 border-l-4 border-yellow-400">
<div class="font-semibold text-gray-800 mb-1">政策风险</div>
<div class="text-gray-600 text-sm">央行对支付机构注册资本实缴要求趋严，31.5亿增资虽达标，但后续或需追加投入。</div>
</div>
<div class="bg-amber-50 rounded-lg p-4 border-l-4 border-amber-400">
<div class="font-semibold text-gray-800 mb-1">信息矛盾</div>
<div class="text-gray-600 text-sm">新闻称"碰一下"将投入40亿补贴，但路演显示抖音本地生活2024年目标仅覆盖佣金成本，补贴力度可能不及预期。</div>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-coins text-yellow-500 mr-3"></i>
综合结论与投资启示
</h2>
<div class="mb-6">
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-5 mb-4">
<div class="font-semibold text-gray-800 mb-2">阶段判断</div>
<div class="text-gray-600">概念处于"牌照+技术"驱动的早期阶段，尚未进入基本面兑现期，需警惕主题炒作退潮。</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="bg-green-50 rounded-lg p-4">
<div class="font-semibold text-gray-800 mb-2">短期投资方向</div>
<div class="text-gray-600 text-sm">关注支付服务商（拉卡拉、优博讯）的硬件升级订单，但需跟踪试点城市落地数据。</div>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<div class="font-semibold text-gray-800 mb-2">长期投资方向</div>
<div class="text-gray-600 text-sm">若抖音商城GMV占比达40%，本地生活SaaS服务商（如值得买抖音营销DP服务）或受益。</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="font-semibold text-gray-800 mb-2">关键跟踪指标</div>
<ul class="list-disc pl-5 text-gray-600 text-sm space-y-1">
<li>"碰一下"支付试点商户数（目标：2025年覆盖100万商户）</li>
<li>抖音本地生活佣金收入/补贴率（需>4%才能实现盈利）</li>
<li>线下POS改造渗透率（当前<5%，支付宝为60%+）</li>
</ul>
</div>
<div class="mt-4 bg-red-50 rounded-lg p-4 border-l-4 border-red-400">
<div class="font-semibold text-gray-800 mb-1">风险提示</div>
<div class="text-gray-600 text-sm">若2024年抖音本地生活继续亏损，支付补贴可能收缩，概念将回归主题炒作。</div>
</div>
</div>
</div>
<!-- 关联股票表格 -->
<div class="bg-white rounded-xl card-shadow p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-table text-blue-500 mr-3"></i>
关联股票
</h2>
<div class="table-container">
<table class="min-w-full bg-white">
<thead>
<tr class="bg-gray-100 text-gray-600 text-sm">
<th class="py-3 px-4 text-left">股票名称</th>
<th class="py-3 px-4 text-left">分类</th>
<th class="py-3 px-4 text-left">项目</th>
<th class="py-3 px-4 text-left">关联原因</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm">
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">华峰超纤</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">花瓣支付服务商</td>
<td class="py-3 px-4">全资子公司威富通为花瓣支付的服务商之一，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">蜂助手</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">HUAWEI支付合作</td>
<td class="py-3 px-4">公司已与HUAWEI支付达成合作，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">世纪恒通</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">花瓣支付服务商</td>
<td class="py-3 px-4">花瓣支付服务商，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">新晨科技</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">金融行业合作</td>
<td class="py-3 px-4">与HUAWEI在金融行业多个用户的项目中有良好合作，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">楚天龙</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">数字人民币基础设施</td>
<td class="py-3 px-4">通过智能合约平台协助花瓣支付打造数字人民币基础设施，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">科蓝软件</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">互联网支付平台合作</td>
<td class="py-3 px-4">互联网支付平台可协助金融客户与花瓣支付对接，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">拉卡拉</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">鸿蒙支付生态合作</td>
<td class="py-3 px-4">在鸿蒙支付生态领域合作，涉及商家收款、便民应用及华为PAY推广，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">优博讯</td>
<td class="py-3 px-4">华为支付（花瓣）</td>
<td class="py-3 px-4">手机钱包收款功能开发</td>
<td class="py-3 px-4">参与华为手机钱包收款核心功能开发，金融POS产品支持华为手机钱包支付，信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">值得买</td>
<td class="py-3 px-4">抖音支付</td>
<td class="py-3 px-4">抖音营销服务</td>
<td class="py-3 px-4">子公司星罗为抖音支付提供抖音营销服务（DP服务），信息来源为互动</td>
</tr>
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="py-3 px-4 font-semibold text-gray-800">天虹股份</td>
<td class="py-3 px-4">抖音支付</td>
<td class="py-3 px-4">抖音官方直播间</td>
<td class="py-3 px-4">开设抖音官方直播间，创新性携抖音券功能，成为抖音首批探索本地生活服务的零售购百企业，信息来源为调研</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 页脚 -->
<div class="text-center py-6 text-gray-500 text-sm">
<p>© 2025 华为抖音支付概念分析 | 数据来源：公开资料整理</p>
</div>
</div>
<!-- 粒子效果脚本 -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
tsParticles.load("particles-js", {
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#8b5cf6"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: true
},
size: {
value: 3,
random: true
},
line_linked: {
enable: true,
distance: 150,
color: "#8b5cf6",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
</script>
</body>
</html>
```