251 lines
22 KiB
HTML
251 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — Splash</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.splash-container {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-5);
|
|
background: var(--void);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logo-wrap {
|
|
position: relative;
|
|
width: 140px;
|
|
height: 140px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: logoFadeIn 0.8s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.kalei-wordmark {
|
|
font-family: var(--font-display);
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--soft-light);
|
|
letter-spacing: 0.05em;
|
|
animation: logoFadeIn 0.8s ease-out 0.4s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.tap-hint {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
color: var(--faint-light);
|
|
letter-spacing: 0.08em;
|
|
animation: hintPulse 2s ease-in-out infinite;
|
|
animation-delay: 2s;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes logoFadeIn {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes hintPulse {
|
|
0% { opacity: 0; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="device-frame">
|
|
<a class="splash-container" href="02-welcome.html">
|
|
<div class="logo-wrap">
|
|
<!-- soft-elegance-final.svg — the actual Kalei logo, scaled to 160x160 -->
|
|
<svg viewBox="0 0 400 400" width="160" height="160">
|
|
<defs>
|
|
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
|
</linearGradient>
|
|
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
|
</linearGradient>
|
|
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#3B82F6"/>
|
|
</linearGradient>
|
|
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
|
</linearGradient>
|
|
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#10B981"/>
|
|
</linearGradient>
|
|
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
|
</linearGradient>
|
|
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#F59E0B"/>
|
|
</linearGradient>
|
|
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
|
</linearGradient>
|
|
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#EC4899"/>
|
|
</linearGradient>
|
|
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
|
</linearGradient>
|
|
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#6366F1"/>
|
|
</linearGradient>
|
|
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
|
</linearGradient>
|
|
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="5s" repeatCount="indefinite"/></stop>
|
|
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
|
</radialGradient>
|
|
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
|
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
|
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<radialGradient id="coreHalo" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
|
|
<stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
|
|
<stop offset="80%" stop-color="#C4B5FD" stop-opacity="0.08"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/><animate attributeName="stop-opacity" values="0.05;0.12;0.05" dur="4s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="6" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="12" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
|
<feGaussianBlur stdDeviation="18" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="bladeTipGlow" x="-200%" y="-200%" width="500%" height="500%">
|
|
<feGaussianBlur stdDeviation="5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
|
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<g transform="translate(200, 200)">
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
|
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/></path>
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/></path>
|
|
<line x1="40" y1="0" x2="-30" y2="160" stroke="#C4B5FD" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/></path>
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
|
<line x1="40" y1="0" x2="-30" y2="160" stroke="#93C5FD" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0.83s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/></path>
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
|
<line x1="40" y1="0" x2="-30" y2="160" stroke="#6EE7B7" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="1.66s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/></path>
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
|
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FDE68A" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="2.5s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/></path>
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
|
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FBCFE8" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="3.33s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
|
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/></path>
|
|
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
|
<line x1="40" y1="0" x2="-30" y2="160" stroke="#A5B4FC" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="4.16s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<g filter="url(#bladeTipGlow)">
|
|
<circle cx="-30" cy="160" r="4" fill="#A78BFA" opacity="0"><animate attributeName="opacity" values="0;0.35;0" dur="4s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-30" cy="160" r="4" fill="#3B82F6" opacity="0" transform="rotate(60)"><animate attributeName="opacity" values="0;0.35;0" dur="4.5s" begin="0.5s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-30" cy="160" r="4" fill="#10B981" opacity="0" transform="rotate(120)"><animate attributeName="opacity" values="0;0.35;0" dur="5s" begin="1s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-30" cy="160" r="4" fill="#F59E0B" opacity="0" transform="rotate(180)"><animate attributeName="opacity" values="0;0.35;0" dur="4.2s" begin="1.5s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-30" cy="160" r="4" fill="#EC4899" opacity="0" transform="rotate(240)"><animate attributeName="opacity" values="0;0.35;0" dur="4.8s" begin="2s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-30" cy="160" r="4" fill="#6366F1" opacity="0" transform="rotate(300)"><animate attributeName="opacity" values="0;0.35;0" dur="4.3s" begin="2.5s" repeatCount="indefinite"/></circle>
|
|
</g>
|
|
<g filter="url(#coreGlow)">
|
|
<circle r="45" fill="url(#prismatic)" opacity="0.35"><animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/></circle>
|
|
<circle r="55" fill="url(#coreHalo)"><animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/></circle>
|
|
<g opacity="0.35">
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="150s" repeatCount="indefinite"/>
|
|
<polygon points="0,0 2,35 -2,35" fill="#A78BFA"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" repeatCount="indefinite"/></polygon>
|
|
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.2s" begin="0.4s" repeatCount="indefinite"/></polygon>
|
|
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.4s" begin="0.8s" repeatCount="indefinite"/></polygon>
|
|
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" begin="1.2s" repeatCount="indefinite"/></polygon>
|
|
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.3s" begin="1.6s" repeatCount="indefinite"/></polygon>
|
|
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.5s" begin="2s" repeatCount="indefinite"/></polygon>
|
|
</g>
|
|
<g opacity="0.3">
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="75s" repeatCount="indefinite"/>
|
|
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="0s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(30)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(60)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(90)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(120)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="1.2s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(150)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(180)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(210)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(240)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(270)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(300)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="3s" repeatCount="indefinite"/></line>
|
|
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(330)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/></line>
|
|
</g>
|
|
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95"><animate attributeName="r" values="10;14;10" dur="3s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-4" cy="-4" r="6" fill="#ffffff" opacity="0.2"><animate attributeName="opacity" values="0.2;0.35;0.2" dur="4s" repeatCount="indefinite"/></circle>
|
|
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)"><animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/></circle>
|
|
<circle cx="-2" cy="5" r="2" fill="#FDE68A" opacity="0"><animate attributeName="opacity" values="0;0.15;0" dur="5s" repeatCount="indefinite"/></circle>
|
|
</g>
|
|
<g filter="url(#shimmer)">
|
|
<circle r="2" fill="#A78BFA" opacity="0"><animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/><animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/></circle>
|
|
<circle r="1.5" fill="#3B82F6" opacity="0"><animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/><animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/></circle>
|
|
<circle r="1.5" fill="#10B981" opacity="0"><animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/><animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/></circle>
|
|
<circle r="2" fill="#F59E0B" opacity="0"><animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/><animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/></circle>
|
|
<circle r="1" fill="#EC4899" opacity="0"><animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/><animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/></circle>
|
|
<circle r="1.5" fill="#fff" opacity="0"><animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/><animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/></circle>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<span class="kalei-wordmark">Kalei</span>
|
|
<span class="body-sm tap-hint">tap to continue</span>
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
setTimeout(function() {
|
|
window.location.href = '02-welcome.html';
|
|
}, 3500);
|
|
</script>
|
|
</body>
|
|
</html>
|