cdricms/vnidrop
1
1
Fork 0
mirror of https://github.com/sudosylabs/vnidrop.git synced 2026-08-05 02:29:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): add animated product website

Browse Source
This commit is contained in:
Hammed Abass
2026-07-16 16:38:30 +02:00
parent e40a4bfee2
commit d61d6f3c5b
38 changed files with 12046 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
docs/components/platform-scene.css Normal file
View File

@@ -0,0 +1,103 @@
/* Cross-platform orbit */
.platform-orbit {
position: relative;
width: min(100%, 610px);
aspect-ratio: 1;
margin: 0 auto;
}
.platform-ring {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #e2d8e7;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.platform-ring::before,
.platform-ring::after {
position: absolute;
border-radius: 50%;
background: var(--brand-400);
box-shadow: 0 0 0 7px rgba(168, 85, 247, 0.08);
content: "";
}
.platform-ring-outer {
width: 88%;
height: 88%;
animation: orbit-spin 35s linear infinite;
}
.platform-ring-outer::before { top: 13%; left: 10%; width: 7px; height: 7px; }
.platform-ring-outer::after { right: 7%; bottom: 23%; width: 5px; height: 5px; }
.platform-ring-inner {
width: 58%;
height: 58%;
border-style: dashed;
animation: orbit-spin 25s linear infinite reverse;
}
.platform-ring-inner::before { top: 48%; left: -4px; width: 7px; height: 7px; }
.platform-ring-inner::after { top: 4%; right: 23%; width: 5px; height: 5px; }
.platform-center {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
display: grid;
width: 145px;
height: 145px;
place-items: center;
border: 1px solid #e5d8eb;
border-radius: 38px;
background: white;
box-shadow: 0 30px 80px rgba(55, 29, 67, 0.16);
transform: translate(-50%, -50%) rotate(-3deg);
}
.platform-center svg { position: relative; z-index: 2; width: 87px; height: 87px; }
.platform-center-glow {
position: absolute;
inset: -45px;
border-radius: 50%;
background: rgba(168, 85, 247, 0.18);
filter: blur(42px);
animation: platform-glow 5s ease-in-out infinite;
}
.platform-chip {
position: absolute;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid #e2d9e6;
border-radius: 999px;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 12px 35px rgba(53, 34, 61, 0.1);
color: #4b4350;
font-size: 11px;
font-weight: 700;
animation: platform-chip-float 5s ease-in-out infinite;
}
.platform-chip i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand-500);
box-shadow: 0 0 0 4px var(--brand-100);
}
.platform-chip-1 { top: 8%; left: 17%; animation-delay: -1s; }
.platform-chip-2 { top: 19%; right: 5%; animation-delay: -2.7s; }
.platform-chip-3 { right: 1%; bottom: 22%; animation-delay: -4s; }
.platform-chip-4 { bottom: 7%; left: 24%; animation-delay: -0.5s; }
.platform-chip-5 { top: 45%; left: 0; animation-delay: -3.2s; }