Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
353
initial mockups/screens/turn/12-turn-animation.html
Normal file
353
initial mockups/screens/turn/12-turn-animation.html
Normal file
@@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turning...</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.anim-screen {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prismatic shimmer background */
|
||||
.prismatic-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(139,92,246,0.08),
|
||||
rgba(59,130,246,0.06),
|
||||
rgba(16,185,129,0.05),
|
||||
rgba(245,158,11,0.06),
|
||||
rgba(236,72,153,0.05)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: prismaticShift 4s ease infinite;
|
||||
}
|
||||
|
||||
/* Collapsing thought text */
|
||||
.thought-text {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
font-size: 16px;
|
||||
color: var(--soft-light);
|
||||
text-align: center;
|
||||
animation: turnCollapse 0.8s ease-in 1s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes turnCollapse {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0.3) translateY(-60px); }
|
||||
}
|
||||
|
||||
/* Central fragment that multiplies */
|
||||
.center-fragment {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: centralAppear 0.5s ease-out 1.8s both;
|
||||
}
|
||||
|
||||
@keyframes centralAppear {
|
||||
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
|
||||
60% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
}
|
||||
|
||||
/* Three emerging fragments */
|
||||
.fragment-1, .fragment-2, .fragment-3 {
|
||||
position: absolute;
|
||||
animation: fragmentEmerge 0.8s ease-out both;
|
||||
opacity: 0;
|
||||
}
|
||||
.fragment-1 {
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation-delay: 2.4s;
|
||||
--drift-x: 0px;
|
||||
--drift-y: -40px;
|
||||
}
|
||||
.fragment-2 {
|
||||
top: 55%;
|
||||
left: 25%;
|
||||
animation-delay: 2.6s;
|
||||
--drift-x: -30px;
|
||||
--drift-y: 20px;
|
||||
}
|
||||
.fragment-3 {
|
||||
top: 55%;
|
||||
left: 65%;
|
||||
animation-delay: 2.8s;
|
||||
--drift-x: 30px;
|
||||
--drift-y: 20px;
|
||||
}
|
||||
|
||||
@keyframes fragmentEmerge {
|
||||
0% { opacity: 0; transform: scale(0.2) translate(0, 0); }
|
||||
50% { opacity: 1; transform: scale(1.15) translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * 0.5)); }
|
||||
100% { opacity: 1; transform: scale(1) translate(var(--drift-x), var(--drift-y)); }
|
||||
}
|
||||
|
||||
/* Crystallize labels */
|
||||
.crystal-label {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
opacity: 0;
|
||||
animation: settleIn 0.5s ease-out both;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
}
|
||||
.crystal-label-1 {
|
||||
top: 24%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: var(--amethyst-light);
|
||||
animation-delay: 3.2s;
|
||||
}
|
||||
.crystal-label-2 {
|
||||
top: 68%;
|
||||
left: 8%;
|
||||
color: var(--sapphire-light);
|
||||
animation-delay: 3.4s;
|
||||
}
|
||||
.crystal-label-3 {
|
||||
top: 68%;
|
||||
left: 56%;
|
||||
color: var(--emerald-light);
|
||||
animation-delay: 3.6s;
|
||||
}
|
||||
|
||||
@keyframes settleIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes settleIn1 {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
.crystal-label-1 { animation-name: settleIn1; }
|
||||
|
||||
/* Orbiting motes */
|
||||
.mote {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: orbit 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Status label */
|
||||
.status-label {
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
animation: fadeIn 0.5s ease-out 2s both;
|
||||
}
|
||||
|
||||
/* See results button */
|
||||
.see-results-btn {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
animation: fadeIn 0.5s ease-out 4s both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Big rotating kaleido */
|
||||
.big-kaleido {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
animation:
|
||||
kaleido-appear 1s ease-out 2s forwards,
|
||||
rotate 20s linear 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes kaleido-appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes prismaticShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg) translateX(80px); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg) translateX(80px); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar" style="position:relative;z-index:10;">
|
||||
<span class="time">8:15</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
|
||||
<rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
|
||||
<rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
|
||||
<rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/>
|
||||
</svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||||
<path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/>
|
||||
</svg>
|
||||
<svg width="24" height="12" viewBox="0 0 24 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/>
|
||||
<rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="anim-screen">
|
||||
<div class="prismatic-bg"></div>
|
||||
|
||||
<!-- Collapsing thought -->
|
||||
<div class="thought-text">I completely bombed my presentation today and everyone saw</div>
|
||||
|
||||
<!-- Background kaleidoscope -->
|
||||
<div class="big-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="200" height="200" alt="Kalei" style="opacity: 0.6;">
|
||||
</div>
|
||||
|
||||
<!-- Central fragment -->
|
||||
<div class="center-fragment">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<linearGradient id="cfGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="cfGlow">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#cfGlow)">
|
||||
<path d="M24 4L40 24L24 44L8 24Z" fill="url(#cfGrad)" opacity="0.9"/>
|
||||
<path d="M24 4L40 24L24 24Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 1 — Amethyst -->
|
||||
<div class="fragment-1">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f1g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="f1glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f1glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f1g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 2 — Sapphire -->
|
||||
<div class="fragment-2">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f2g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<filter id="f2glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f2glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f2g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 3 — Emerald -->
|
||||
<div class="fragment-3">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f3g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="f3glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f3glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f3g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Crystal labels -->
|
||||
<div class="crystal-label crystal-label-1">Perspective Shift</div>
|
||||
<div class="crystal-label crystal-label-2">Evidence Check</div>
|
||||
<div class="crystal-label crystal-label-3">Action Step</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="status-label">Turning the kaleidoscope...</div>
|
||||
|
||||
<!-- See results -->
|
||||
<div class="see-results-btn">
|
||||
<a href="13-turn-results.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
See your results
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto-redirect after animation completes
|
||||
setTimeout(() => {
|
||||
window.location.href = '13-turn-results.html';
|
||||
}, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user