All Prompts
All Prompts
featuretailwindanimatedresponsivedashboardcode-previewanalytics
AI Layout Architecture Feature Section
Секция с AI-генерацией лейаутов. Демонстрирует возможности: hero, фичи, анимации, код, аналитика. Адаптивный дизайн.
Prompt
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl mr-auto ml-auto pr-6 pl-6">
<div class="flex flex-col gap-16 w-full max-w-[1400px] mr-auto ml-auto gap-x-12 gap-y-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll max-w-xl gap-x-8 gap-y-8">
<div class="[animation:fadeSlideIn_1s_ease-out_0.2s_both] animate-on-scroll">
<span class="inline-flex items-center px-3 py-1 bg-cyan-950/30 border border-cyan-500/20 text-[11px] text-cyan-400 uppercase mb-6 font-bold tracking-wider font-sans">
AI Architecture
</span>
<h2 class="text-4xl lg:text-5xl text-white mb-6 leading-[1.1] tracking-tight font-manrope font-medium">
Intelligent Layout Assembly
</h2>
<p class="text-lg text-zinc-400 leading-relaxed font-medium font-sans">
Kreona analyzes your prompt to construct semantically correct
component trees. It balances visual hierarchy with clean code
structure automatically.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll gap-x-6 gap-y-6">
<div class="flex flex-col gap-3 group">
<div class="w-10 h-10 flex items-center justify-center text-zinc-300 bg-zinc-950 border border-white/10 group-hover:border-cyan-500/50 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-lg text-cyan-300" style="" data-icon-set="solar" data-solar="structure-bold-duotone">
<path fill="currentColor" d="M8 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0m14 0a3 3 0 1 1-6 0a3 3 0 0 1 6 0M8 19a3 3 0 1 1-6 0a3 3 0 0 1 6 0m14 0a3 3 0 1 1-6 0a3 3 0 0 1 6 0" class=""></path>
<path fill="currentColor" d="M16.093 4.256A1 1 0 0 0 16 4.25H8a1 1 0 0 0-.093.006a3 3 0 0 1 0 1.488q.045.006.093.006h8a1 1 0 0 0 .093-.006a3 3 0 0 1 0-1.488M19 8q.386 0 .744-.093q.006.045.006.093v8a1 1 0 0 1-.006.093a3 3 0 0 0-1.488 0A1 1 0 0 1 18.25 16V8q0-.048.006-.093q.358.091.744.093m-2.907 10.256A1 1 0 0 0 16 18.25H8a1 1 0 0 0-.093.006a3 3 0 0 1 0 1.488q.045.006.093.006h8a1 1 0 0 0 .093-.006a3 3 0 0 1 0-1.488M5 8q-.386 0-.744-.093A1 1 0 0 0 4.25 8v8q0 .048.006.093a3 3 0 0 1 1.488 0A1 1 0 0 0 5.75 16V8a1 1 0 0 0-.006-.093Q5.386 7.998 5 8" opacity=".5" class=""></path>
</svg>
</div>
<p class="text-sm text-zinc-400 leading-snug font-medium font-sans">
Auto-generates semantic HTML structure based on context.
</p>
</div>
<div class="flex flex-col gap-3 group">
<div class="w-10 h-10 flex items-center justify-center text-zinc-300 bg-zinc-950 border border-white/10 group-hover:border-blue-500/50 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-lg text-blue-300" style="" data-icon-set="solar" data-solar="devices-bold-duotone">
<path fill="currentColor" d="M14.052 2c1.68 0 3.01 0 4.052.142c1.072.147 1.94.456 2.624 1.152s.988 1.58 1.132 2.67c.14 1.06.14 2.414.14 4.123v3.826c0 1.71 0 3.064-.14 4.123c-.144 1.09-.448 1.974-1.132 2.67s-1.552 1.005-2.624 1.152C17.063 22 15.732 22 14.052 22h-.104c-1.68 0-3.01 0-4.052-.142c-1.072-.147-1.94-.456-2.624-1.152s-.988-1.58-1.132-2.67C6 16.976 6 15.622 6 13.913v-3.826c0-1.71 0-3.064.14-4.123c.144-1.09.448-1.974 1.132-2.67S8.824 2.29 9.896 2.142C10.937 2 12.268 2 13.948 2z" opacity=".5" class=""></path>
<path fill="currentColor" d="M12 18.25a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5zM2 14.5c0-1.405 0-2.107.337-2.611a2 2 0 0 1 .552-.552C3.393 11 4.096 11 5.5 11s2.107 0 2.611.337a2 2 0 0 1 .552.552C9 12.393 9 13.096 9 14.5v4c0 1.404 0 2.107-.337 2.611a2 2 0 0 1-.552.552C7.607 22 6.904 22 5.5 22s-2.107 0-2.611-.337a2 2 0 0 1-.552-.552C2 20.607 2 19.904 2 18.5z" class=""></path>
</svg>
</div>
<p class="text-sm text-zinc-400 leading-snug font-medium font-sans">
Ensures perfect responsiveness across all viewports.
</p>
</div>
</div>
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll pt-4">
<button class="bg-white text-black px-8 py-4 text-sm hover:bg-cyan-50 transition-all shadow-[0_0_20px_-5px_rgba(34,211,238,0.4)] active:translate-y-0.5 font-bold font-sans tracking-wide [animation:fadeSlideIn_1s_ease-out_0.5s_both] animate-on-scroll">
Try Kreona free
</button>
</div>
</div>
<div class="overflow-hidden shadow-cyan-900/5 group hover:border-cyan-500/30 transition-colors duration-500 [animation:fadeSlideIn_1s_ease-out_0.5s_both] animate-on-scroll bg-zinc-950 border-white/10 border relative shadow-2xl">
<div class="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"></div>
<div class="absolute top-0 left-0 w-2 h-2 border-t border-l border-cyan-500/50"></div>
<div class="absolute top-0 right-0 w-2 h-2 border-t border-r border-cyan-500/50"></div>
<div class="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-cyan-500/50"></div>
<div class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-cyan-500/50"></div>
<div class="px-6 py-4 border-b border-white/5 bg-zinc-900/80 flex items-center justify-between relative z-10">
<div class="flex gap-1.5">
<div class="w-2 h-2 bg-zinc-700"></div>
<div class="w-2 h-2 bg-zinc-700"></div>
<div class="w-2 h-2 bg-zinc-700"></div>
</div>
<div class="text-[10px] font-mono text-cyan-500/70 tracking-wider">
Generated_Layout_Tree.json
</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5 bg-zinc-950/50 text-xs font-medium text-zinc-500 uppercase tracking-wider relative z-10">
<div class="col-span-5 pl-2 font-medium font-sans">
Component
</div>
<div class="col-span-3 text-center font-medium font-sans">
Type
</div>
<div class="col-span-2 text-center font-medium font-sans">
Nodes
</div>
<div class="col-span-2 text-right font-medium font-sans">
Size
</div>
</div>
<div class="flex flex-col z-10 relative">
<div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5 items-center hover:bg-white/[0.02] transition-colors group/row">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-cyan-400" style="" data-icon-set="solar" data-solar="laptop-minimalistic-bold-duotone">
<path fill="currentColor" fill-rule="evenodd" d="M1 20.24c0-.42.344-.76.767-.76h20.466c.423 0 .767.34.767.76s-.344.76-.767.76H1.767A.764.764 0 0 1 1 20.24" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M3.69 3.89c-.899.89-.899 2.324-.899 5.19v5.067c0 1.91 0 2.866.6 3.46c.599.593 1.564.593 3.493.593h10.233c1.93 0 2.894 0 3.493-.594c.6-.593.6-1.549.6-3.46V9.08c0-2.866 0-4.3-.9-5.19C19.412 3 17.965 3 15.07 3H8.93c-2.894 0-4.34 0-5.24.89" opacity=".5" class=""></path>
<path fill="currentColor" d="M8.93 14.4a.764.764 0 0 0-.767.76c0 .42.344.76.768.76h6.14c.423 0 .767-.34.767-.76s-.344-.76-.768-.76z" class=""></path>
</svg>
<span class="text-sm text-zinc-200 font-medium font-sans">
Split Hero Section
</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-cyan-950/50 border border-cyan-500/20 text-[10px] text-cyan-300 font-medium font-sans">
Layout
</span>
<span class="px-1.5 py-0.5 bg-blue-950/50 border border-blue-500/20 text-[10px] text-blue-300 font-medium font-sans">
Flex
</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium font-sans">
12
</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-1.5 bg-cyan-500"></div>
<div class="w-0.5 h-2.5 bg-cyan-500"></div>
<div class="w-0.5 h-3 bg-cyan-500"></div>
<div class="w-0.5 h-2 bg-cyan-500/30"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[85%] h-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.5)]"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium font-sans">
2k
</span>
</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5 items-center hover:bg-white/[0.02] transition-colors group/row">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-blue-400" style="" data-icon-set="solar" data-solar="gallery-wide-bold-duotone">
<path fill="currentColor" d="M18.512 10.077c0 .738-.625 1.337-1.396 1.337s-1.395-.599-1.395-1.337c0-.739.625-1.338 1.395-1.338s1.396.599 1.396 1.338" class=""></path>
<path fill="currentColor" fill-rule="evenodd" d="M18.036 5.532c-1.06-.137-2.414-.137-4.123-.136h-3.826c-1.71 0-3.064 0-4.123.136c-1.09.14-1.974.437-2.67 1.104S2.29 8.149 2.142 9.195C2 10.21 2 11.508 2 13.147v.1c0 1.64 0 2.937.142 3.953c.147 1.046.456 1.892 1.152 2.559s1.58.963 2.67 1.104c1.06.136 2.414.136 4.123.136h3.826c1.71 0 3.064 0 4.123-.136c1.09-.14 1.974-.437 2.67-1.104s1.005-1.514 1.152-2.559C22 16.184 22 14.886 22 13.248v-.1c0-1.64 0-2.937-.142-3.953c-.147-1.046-.456-1.892-1.152-2.559s-1.58-.963-2.67-1.104M6.15 6.858c-.936.12-1.475.346-1.87.724c-.393.377-.629.894-.755 1.791c-.1.72-.123 1.619-.128 2.795l.47-.395c1.125-.942 2.819-.888 3.875.124l3.99 3.825a1.2 1.2 0 0 0 1.491.124l.278-.187a3.606 3.606 0 0 1 4.34.25l2.407 2.077c.098-.264.173-.579.227-.964c.128-.916.13-2.124.13-3.824s-.002-2.909-.13-3.825c-.126-.897-.362-1.414-.756-1.791c-.393-.378-.933-.604-1.869-.724c-.956-.124-2.216-.125-3.99-.125h-3.72c-1.774 0-3.034.001-3.99.125" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M17.087 2.61c-.86-.11-1.955-.11-3.32-.11h-3.09c-1.364 0-2.459 0-3.318.11c-.89.115-1.633.358-2.222.92a2.9 2.9 0 0 0-.724 1.12c.504-.23 1.074-.366 1.714-.45c1.085-.14 2.47-.14 4.22-.14h3.915c1.749 0 3.134 0 4.219.14c.559.073 1.064.186 1.52.366a2.9 2.9 0 0 0-.693-1.035c-.589-.563-1.331-.806-2.221-.92" opacity=".5" class=""></path>
</svg>
<span class="text-sm text-zinc-200 font-medium font-sans">
Bento Feature Grid
</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-blue-950/50 border border-blue-500/20 text-[10px] text-blue-300 font-medium font-sans">
Grid
</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium font-sans">
24
</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-2 bg-blue-500"></div>
<div class="w-0.5 h-3 bg-blue-500"></div>
<div class="w-0.5 h-1.5 bg-blue-500/30"></div>
<div class="w-0.5 h-1 bg-blue-500/30"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[60%] h-full bg-blue-500"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium font-sans">
1.5
</span>
</div>
</div>
<div class="grid grid-cols-12 gap-4 hover:bg-white/[0.02] transition-colors group/row border-white/5 border-b pt-4 pr-6 pb-4 pl-6 gap-x-4 gap-y-4 items-center">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-sky-400" style="" data-icon-set="solar" data-solar="users-group-rounded-bold-duotone">
<circle cx="15" cy="6" r="3" fill="currentColor" opacity=".4" class=""></circle>
<ellipse cx="16" cy="17" fill="currentColor" opacity=".4" rx="5" ry="3" class=""></ellipse>
<circle cx="9.001" cy="6" r="4" fill="currentColor" class=""></circle>
<ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4" class=""></ellipse>
</svg>
<span class="text-sm text-zinc-200 font-medium font-sans">
Social Proof Carousel
</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-sky-950/50 border border-sky-500/20 text-[10px] text-sky-300 font-medium font-sans">
Loop
</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium font-sans">
8
</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-1 bg-sky-500"></div>
<div class="w-0.5 h-3 bg-sky-500"></div>
<div class="w-0.5 h-3 bg-sky-500"></div>
<div class="w-0.5 h-2 bg-sky-500"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[40%] h-full bg-sky-500"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium font-sans">
1k
</span>
</div>
</div>
<div class="grid grid-cols-12 gap-4 hover:bg-white/[0.02] transition-colors group/row pt-4 pr-6 pb-4 pl-6 gap-x-4 gap-y-4 items-center">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-teal-400" style="" data-icon-set="solar" data-solar="tag-price-bold-duotone">
<path fill="currentColor" d="m17.967 6.558l-1.83-1.83c-1.546-1.545-2.318-2.318-3.321-2.605c-1.003-.288-2.068-.042-4.197.45l-1.228.283c-1.792.413-2.688.62-3.302 1.233S3.27 5.6 2.856 7.391l-.284 1.228c-.491 2.13-.737 3.194-.45 4.197c.288 1.003 1.061 1.775 2.606 3.32l1.83 1.83C9.248 20.657 10.592 22 12.262 22c1.671 0 3.015-1.344 5.704-4.033c2.69-2.69 4.034-4.034 4.034-5.705c0-1.67-1.344-3.015-4.033-5.704" opacity=".5" class=""></path>
<path fill="currentColor" d="M11.147 14.328c-.673-.672-.667-1.638-.265-2.403a.75.75 0 0 1 1.04-1.046c.34-.18.713-.276 1.085-.272a.75.75 0 0 1-.014 1.5a.88.88 0 0 0-.609.277c-.387.387-.285.775-.177.884c.11.109.497.21.884-.177c.784-.784 2.138-1.044 3.006-.177c.673.673.667 1.639.264 2.404a.75.75 0 0 1-1.04 1.045a2.2 2.2 0 0 1-1.472.232a.75.75 0 1 1 .302-1.47c.177.037.463-.021.708-.266c.388-.388.286-.775.177-.884s-.496-.21-.884.177c-.784.784-2.138 1.044-3.005.176m-1.126-4.035a2 2 0 1 0-2.828-2.828a2 2 0 0 0 2.828 2.828" class=""></path>
</svg>
<span class="text-sm text-zinc-200 font-medium font-sans">
Pricing Toggles
</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-teal-950/50 border border-teal-500/20 text-[10px] text-teal-300 font-medium font-sans">
Logic
</span>
<span class="px-1.5 py-0.5 bg-zinc-800 border border-zinc-700 text-[10px] text-zinc-400 font-medium font-sans">
State
</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium font-sans">
16
</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-2 bg-teal-500"></div>
<div class="w-0.5 h-1.5 bg-teal-500"></div>
<div class="w-0.5 h-2.5 bg-teal-500"></div>
<div class="w-0.5 h-2 bg-teal-500/30"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[30%] h-full bg-teal-500"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium font-sans">
800
</span>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 mt-4 gap-x-8 gap-y-8">
<div class="lg:p-10 flex flex-col overflow-hidden group hover:border-cyan-500/30 transition-all [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll bg-zinc-950 border-white/10 border pt-8 pr-8 pb-8 pl-8 relative">
<div class="absolute top-0 left-0 w-3 h-3 border-t border-l border-white/20 group-hover:border-cyan-500/50 transition-colors"></div>
<div class="absolute top-0 right-0 w-3 h-3 border-t border-r border-white/20 group-hover:border-cyan-500/50 transition-colors"></div>
<div class="z-10 relative text-left">
<h3 class="text-2xl text-white mb-3 tracking-tight font-manrope font-medium">
Code Generation Interface
</h3>
<p class="text-zinc-400 text-sm leading-relaxed max-w-lg mb-8 font-medium font-sans">
Kreona ensures every generated layout meets strict standards
for accessibility, SEO, and semantic correctness.
</p>
<div class="bg-zinc-950 w-full max-w-lg max-h-none border-white/10 border mt-auto mr-auto ml-auto pt-4 pr-6 pb-4 pl-6 shadow-2xl shadow-cyan-900/10 h-[14rem] overflow-hidden">
<div class="flex gap-2 mb-3">
<div class="w-2.5 h-2.5 bg-red-500/80 rounded-full"></div>
<div class="w-2.5 h-2.5 bg-yellow-500/80 rounded-full"></div>
<div class="w-2.5 h-2.5 bg-green-500/80 rounded-full"></div>
</div>
<div class="font-mono text-xs text-left leading-relaxed">
<div class="opacity-0 animate-[fadeIn_0.3s_ease-out_0.2s_forwards]">
<span class="text-zinc-600 select-none">$</span>
<span class="text-cyan-400">kreona init</span>
<span class="text-zinc-500">--project=kreona-ui</span>
</div>
<div class="opacity-0 animate-[fadeIn_0.3s_ease-out_1.2s_forwards] mt-3">
<span class="text-zinc-600 select-none">$</span>
<span class="text-cyan-400">kreona build</span>
<span class="text-zinc-500">--target=tailwind-v3</span>
</div>
<div class="opacity-0 animate-[fadeIn_0.3s_ease-out_2.0s_forwards]">
<span class="text-cyan-300">
Generating HTML Structure... [
</span>
<span class="text-white animate-pulse">
███████████████
</span>
<span class="text-cyan-300">] 98%</span>
</div>
<div class="opacity-0 animate-[=" text-green-400="" font-semibold"="">
BUILD COMPLETE:
<span class="text-zinc-400">Output saved.</span>
</div>
<div class="opacity-0 animate-[fadeIn_0.3s_ease-out_4.0s_forwards] mt-3">
<span class="text-zinc-600 select-none">$</span>
<span class="text-cyan-400">kreona score</span>
</div>
<div class="opacity-0 animate-[fadeIn_0.3s_ease-out_4.8s_forwards] flex items-center">
<span class="text-green-400 font-semibold mr-2">
QUALITY:
</span>
<span class="text-white font-semibold">A+</span>
<div class="w-1.5 h-3.5 bg-cyan-500 ml-1 animate-[pulse_1s_steps(2)_infinite]"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-zinc-950 border border-white/10 p-8 lg:p-10 flex flex-col relative overflow-hidden group hover:border-cyan-500/30 transition-all">
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute top-0 left-0 w-3 h-3 border-t border-l border-white/20 group-hover:border-cyan-500/50 transition-colors"></div>
<div class="absolute top-0 right-0 w-3 h-3 border-t border-r border-white/20 group-hover:border-cyan-500/50 transition-colors"></div>
<div class="z-10 relative text-left">
<div class="mb-10">
<h3 class="text-2xl text-white mb-3 tracking-tight font-manrope font-medium">
Design System Scalability
</h3>
<p class="text-zinc-400 text-sm leading-relaxed max-w-sm font-medium font-sans">
Maintain visual consistency as your project grows. Track
component reuse and token standardization automatically.
</p>
</div>
<div class="group overflow-hidden bg-zinc-950 w-full max-w-lg border-white/10 border mt-auto mr-auto ml-auto pt-3 pr-3 pb-3 pl-3 relative">
<style>
@keyframes aura-bar-grow {
from {
transform: scaleY(0.2);
opacity: 0.5;
}
to {
transform: scaleY(1);
opacity: 1;
}
}
.aura-animate-bar {
transform-origin: bottom;
animation: aura-bar-grow 2s ease-in-out infinite alternate;
opacity: 0;
/* Start hidden */
will-change: transform, opacity;
animation-play-state: paused;
/* Handled by IntersectionObserver */
}
</style>
<div class="flex items-end justify-between mb-8">
<div class="">
<div class="text-xs text-zinc-500 mb-1 font-medium font-sans uppercase tracking-wider">
Reusable Tokens
</div>
<div class="text-3xl text-white tracking-tight font-manrope font-medium flex items-baseline">
<span class="tabular-nums tracking-tight" data-animated="complete">
1,240
</span>
<span class="text-zinc-500 ml-1">+</span>
</div>
</div>
<div class="w-10 h-10 rounded-lg bgcyan-500/80 shadow-[0_0_15px_-3px_rgba(6,182,212,0.15)]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database">
<ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
<path d="M3 12A9 3 0 0 0 21 12" class=""></path>
</svg>
</div>
</div>
<div class="flex items-end justify-between h-32 gap-1.5 pt-4 border-t border-white/5 relative">
<div class="absolute inset-0 w-full h-full pointer-events-none flex flex-col justify-between py-1 opacity-20">
<div class="w-full border-t border-dashed border-zinc-700"></div>
<div class="w-full border-t border-dashed border-zinc-700"></div>
<div class="w-full border-t border-dashed border-zinc-700"></div>
</div>
<div class="w-full bg-gradient-to-t from-cyan-900/20 to-cyan-500/20 h-[35%] rounded-t-[2px] aura-animate-bar" style="animation-delay: 0ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-900/30 to-cyan-500/30 h-[50%] rounded-t-[2px] aura-animate-bar" style="animation-delay: 50ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-900/40 to-cyan-500/40 h-[65%] rounded-t-[2px] aura-animate-bar" style="animation-delay: 100ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-600 to-cyan-400 h-[85%] rounded-t-[3px] shadow-[0_0_20px_-5px_rgba(34,211,238,0.4)] aura-animate-bar relative z-10" style="animation-delay: 150ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-600 to-cyan-400 h-[100%] rounded-t-[3px] shadow-[0_0_20px_-5px_rgba(34,211,238,0.4)] aura-animate-bar relative z-10" style="animation-delay: 200ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-900/40 to-cyan-500/40 h-[60%] rounded-t-[2px] aura-animate-bar" style="animation-delay: 250ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-900/30 to-cyan-500/30 h-[45%] rounded-t-[2px] aura-animate-bar" style="animation-delay: 300ms; animation-play-state: running;"></div>
<div class="w-full bg-gradient-to-t from-cyan-900/20 to-cyan-500/20 h-[30%] rounded-t-[2px] aura-animate-bar" style="animation-play-state: running;"></div>
<div class="w-full border-x border-t border-zinc-800/50 bg-zinc-900/30 h-[55%] rounded-t-[2px] aura-animate-bar" style="animation-delay: 450ms; animation-play-state: running;"></div>
</div>
<script>
(function() {
// Since the chart container doesn't have an ID, we'll try to target0 div) is the target for intersection observation.
const chartParent = document.querySelector('.group.bg-zinc-950.w-full.max-w-lg.border-white\\/10');
const counter = chartParent ? chartParent.querySelector('[data-animated="true"]') : null;
// Safety check
if (!chartParent) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 1. Trigger Bar Animation
const bars = chartParent.querySelectorAll('.aura-animate-bar');
bars.forEach(bar => bar.style.animationPlayState = 'running');
// 2. Trigger Number Counter Animation
if (counter && counter.dataset.animated === "true") { // Correcting logic for the counter
counter.dataset.animated = "started"; // Mark as started, but let the script run the animation logic
const target = 1240;
const duration = 2000;
const startTime = performance.now();
const initialValue = parseInt(counter.innerText.replace(/,/g, '')); // Read initial value
function updateCount(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// Ease out exponential
const ease = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
const current = Math.floor(initialValue + ease * (target - initialValue));
counter.innerText = current.toLocaleString();
if (progress < 1) {
requestAnimationFrame(updateCount);
} else {
counter.innerText = "1,240";
counter.dataset.animated = "complete"; // Mark as complete
}
}
requestAnimationFrame(updateCount);
}
// Disconnect after triggering
observer.disconnect();
}
});
}, { threshold: 0.25 });
observer.observe(chartParent);
})();
</script>
</div>
</div>
</div>
</div>
</div>
</div>