mirror of
https://github.com/sune-org/sune-logo.git
synced 2026-03-17 03:11:04 +00:00
Feat: Add life-like organic text generating logo demo
This commit is contained in:
113
index.html
Normal file
113
index.html
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Sune Animation Demo</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
The core rotation creates a surging, non-linear "thinking" motion.
|
||||||
|
It sweeps forward, slows down seamlessly, then sweeps again.
|
||||||
|
*/
|
||||||
|
.s-spin {
|
||||||
|
animation: s-surge 2s infinite;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Odd and Even spikes pulse out of sync with each other
|
||||||
|
creating an organic, jellyfish-like breathing effect.
|
||||||
|
*/
|
||||||
|
.s-even { transform-origin: 50px 50px; animation: s-pulse-e 2s infinite; }
|
||||||
|
.s-odd { transform-origin: 50px 50px; animation: s-pulse-o 2s infinite; }
|
||||||
|
|
||||||
|
@keyframes s-surge {
|
||||||
|
0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
50% { transform: rotate(45deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
100% { transform: rotate(90deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes s-pulse-e {
|
||||||
|
0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
50% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes s-pulse-o {
|
||||||
|
0%, 100% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
50% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen gap-12 text-sm selection:bg-black/10 font-sans">
|
||||||
|
|
||||||
|
<!-- Reusable SVG Definition for the 16-point Star -->
|
||||||
|
<svg style="display:none">
|
||||||
|
<defs>
|
||||||
|
<!-- Master spike perfectly tuned to match the logo proportions -->
|
||||||
|
<polygon id="spike" points="47,50 50,2 53,50"/>
|
||||||
|
|
||||||
|
<g id="s-even">
|
||||||
|
<use href="#spike"/>
|
||||||
|
<use href="#spike" transform="rotate(45 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(90 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(135 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(180 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(225 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(270 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(315 50 50)"/>
|
||||||
|
</g>
|
||||||
|
<g id="s-odd">
|
||||||
|
<use href="#spike" transform="rotate(22.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(67.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(112.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(157.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(202.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(247.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(292.5 50 50)"/>
|
||||||
|
<use href="#spike" transform="rotate(337.5 50 50)"/>
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Tiny UI Context Demo (As requested, "very small the way it would be shown in sune") -->
|
||||||
|
<div class="w-full max-w-md bg-white rounded-2xl shadow-[0_10px_20px_rgba(0,0,0,0.05)] border border-gray-100 overflow-hidden">
|
||||||
|
<div class="px-4 py-3 border-b border-gray-100 font-semibold text-gray-900 flex justify-between items-center">
|
||||||
|
<span>Sune Chat View</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<div class="flex items-center gap-2 px-2">
|
||||||
|
<div class="bg-gray-200 text-gray-900 shrink-0 h-7 w-7 rounded-full flex items-center justify-center">
|
||||||
|
|
||||||
|
<!-- Animated Sune Logo -->
|
||||||
|
<svg viewBox="0 0 100 100" class="w-4 h-4 text-black s-spin">
|
||||||
|
<circle cx="50" cy="50" r="14" fill="currentColor"/>
|
||||||
|
<use href="#s-even" class="s-even" fill="currentColor"/>
|
||||||
|
<use href="#s-odd" class="s-odd" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="text-xs font-medium text-gray-500">Sune · generating...</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 rounded-2xl rounded-tl-none px-4 py-3 w-fit text-gray-800 border border-gray-100 shadow-sm animate-pulse">
|
||||||
|
Crafting something brilliant...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Magnified Demo so you can admire the life-like details -->
|
||||||
|
<div class="flex flex-col items-center gap-4">
|
||||||
|
<h2 class="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Magnified View</h2>
|
||||||
|
<div class="w-32 h-32 flex items-center justify-center bg-white rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.08)] border border-gray-100">
|
||||||
|
<svg viewBox="0 0 100 100" class="w-16 h-16 text-black s-spin">
|
||||||
|
<circle cx="50" cy="50" r="14" fill="currentColor"/>
|
||||||
|
<use href="#s-even" class="s-even" fill="currentColor"/>
|
||||||
|
<use href="#s-odd" class="s-odd" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user