All Prompts
All Prompts
featureuitailwindresponsiveanimatedproductdark
3D Product Feature Section with App UI Preview
Секция с 3D-превью приложения для демонстрации функций продукта. Анимированный текст, список, UI-элементы, адаптивный дизайн.
Prompt
<section class="overflow-hidden bg-center pt-24 pb-24 relative">
<div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 gap-x-8 gap-y-8">
<div class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll justify-center">
<h2 class="md:text-5xl text-3xl font-medium text-white tracking-tight font-jakarta mb-6">
Control every
<span class="text-blue-500 font-jakarta font-medium">
vertex and pixel
</span>
</h2>
<p class="text-lg mb-8 max-w-md font-geist text-gray-400">
Fine-tune lighting, materials, and post-processing effects with
our professional-grade inspector.
</p>
<div class="space-y-4">
<div class="flex items-start gap-4">
<div class="mt-1 w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-read-bold-duotone" class="iconify text-sm iconify--solar">
<path fill="currentColor" d="M3.464 20.536C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535" opacity=".5" class=""></path>
<path fill="currentColor" d="M18.581 9.474a.75.75 0 1 0-1.162-.948l-5.168 6.33a.749.749 0 0 0-.879 1.116l.286.438a.75.75 0 0 0 1.209.064zm-4 0a.75.75 0 1 0-1.162-.948l-5.133 6.288l-1.705-2.088a.75.75 0 0 0-1.162.948l2.286 2.8a.75.75 0 0 0 1.162 0z" class=""></path>
</svg>
</div>
<div class="">
<h4 class="text-white font-medium font-geist">
PBR Materials
</h4>
<p class="text-sm font-geist text-gray-500">
Standard, Physical, and custom ShaderMaterials.
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="mt-1 w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-read-bold-duotone" class="iconify text-sm iconify--solar">
<path fill="currentColor" d="M3.464 20.536C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535" opacity=".5" class=""></path>
<path fill="currentColor" d="M18.581 9.474a.75.75 0 1 0-1.162-.948l-5.168 6.33a.749.749 0 0 0-.879 1.116l.286.438a.75.75 0 0 0 1.209.064zm-4 0a.75.75 0 1 0-1.162-.948l-5.133 6.288l-1.705-2.088a.75.75 0 0 0-1.162.948l2.286 2.8a.75.75 0 0 0 1.162 0z" class=""></path>
</svg>
</div>
<div class="">
<h4 class="text-white font-medium font-geist">
Keyframe Animation
</h4>
<p class="text-sm font-geist text-gray-500">
Timeline editor for complex motion sequences.
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="mt-1 w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-read-bold-duotone" class="iconify text-sm iconify--solar">
<path fill="currentColor" d="M3.464 20.536C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535" opacity=".5" class=""></path>
<path fill="currentColor" d="M18.581 9.474a.75.75 0 1 0-1.162-.948l-5.168 6.33a.749.749 0 0 0-.879 1.116l.286.438a.75.75 0 0 0 1.209.064zm-4 0a.75.75 0 1 0-1.162-.948l-5.133 6.288l-1.705-2.088a.75.75 0 0 0-1.162.948l2.286 2.8a.75.75 0 0 0 1.162 0z" class=""></path>
</svg>
</div>
<div class="">
<h4 class="text-white font-medium font-geist">
Asset Library
</h4>
<p class="text-sm font-geist text-gray-500">
Built-in access to thousands of 3D models.
</p>
</div>
</div>
</div>
</div>
<section class="flex [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll w-full relative items-center justify-center">
<!-- Outer glow -->
<div class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-indigo-500/5 blur-[120px] rounded-full -z-10"></div>
<!-- Perspective wrapper -->
<div class="relative w-full max-w-xl" style="perspective: 1600px;">
<!-- 3D Card Container -->
<div class="relative transform-gpu transform-style-preserve-3d -rotate-y-10 rotate-x-5 hover:-rotate-y-5 hover:rotate-x-0 transition-transform duration-700 ease-out w-full">
<!-- Main card -->
<div class="font-sans bg-[#09090B] rounded-xl p-1 relative shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_20px_50px_rgba(0,0,0,0.5),0_1px_0_rgba(255,255,255,0.1)_inset] overflow-hidden ring-1 ring-white/5">
<!-- Inner Bezel / Content Wrapper -->
<div class="bg-[#0C0C0E] rounded-lg overflow-hidden flex flex-col h-full min-h-[400px]">
<!-- Window Header -->
<div class="flex items-center justify-between bg-[#0C0C0E] px-4 py-3 border-b border-white/5 select-none">
<div class="flex items-center gap-4">
<!-- Traffic Lights -->
<div class="flex gap-1.5 group">
<div class="w-2.5 h-2.5 rounded-full border border-white/5 group-hover:bg-[#FF5F57] transition-colors bg-gray-700/50"></div>
<div class="w-2.5 h-2.5 rounded-full border border-white/5 group-hover:bg-[#FEBC2E] transition-colors bg-gray-700/50"></div>
<div class="w-2.5 h-2.5 rounded-full border border-white/5 group-hover:bg-[#28C840] transition-colors bg-gray-700/50"></div>
</div>
<!-- Breadcrumbs -->
<div class="flex items-center gap-2 text-[11px] font-medium text-gray-500">
<span class="hover:text-white transition-colors cursor-pointer font-geist text-gray-300">
acme-corp
</span>
<span class="font-geist text-gray-700">/</span>
<span class="flex items-center gap-1.5 hover:text-white transition-colors cursor-pointer font-geist text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path>
<polyline points="9 22 9 12 15 12 15 22" class=""></polyline>
</svg>
Project: Nebula
</span>
</div>
</div>
<!-- Header Actions -->
<div class="flex items-center gap-3">
<div class="flex -space-x-1.5">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" class="w-5 h-5 rounded-full ring-2 ring-[#0C0C0E] grayscale opacity-70 hover:opacity-100 transition-opacity" alt="">
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=crop&crop=faces" class="w-5 h-5 rounded-full ring-2 ring-[#0C0C0E] grayscale opacity-70 hover:opacity-100 transition-opacity" alt="">
</div>
<div class="w-px h-3 bg-white/10"></div>
<button class="transition-colors text-gray-500 hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<circle cx="12" cy="12" r="1" class=""></circle>
<circle cx="19" cy="12" r="1" class=""></circle>
<circle cx="5" cy="12" r="1" class=""></circle>
</svg>
</button>
</div>
</div>
<!-- Main Layout -->
<div class="flex flex-1 overflow-hidden relative">
<!-- Sidebar -->
<div class="w-48 hidden sm:flex flex-col border-r border-white/5 bg-[#0A0A0B] py-3 px-2 gap-4">
<!-- Section 1 -->
<div class="space-y-0.5">
<div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider mb-1 font-geist text-gray-600">
Workspace
</div>
<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded-[6px] text-[11px] font-medium border border-white/5 shadow-sm font-geist bg-gray-800/40 text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
<rect width="7" height="7" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="14" rx="1" class=""></rect>
<rect width="7" height="7" x="3" y="14" rx="1" class=""></rect>
</svg>
Inbox
<span class="ml-auto text-[9px] font-mono font-geist text-gray-500">
4
</span>
</button>
<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded-[6px] hover:bg-white/5 transition-colors text-[11px] font-medium font-geist text-gray-500 hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" class=""></path>
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" class=""></path>
</svg>
My Issues
</button>
<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded-[6px] hover:bg-white/5 transition-colors text-[11px] font-medium font-geist text-gray-500 hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg>
Discussions
</button>
</div>
<!-- Section 2 -->
<div class="space-y-0.5">
<div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider mb-1 font-geist text-gray-600">
Your Teams
</div>
<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded-[6px] hover:bg-white/5 transition-colors text-[11px] font-medium group font-geist text-gray-500 hover:text-gray-300">
<span class="w-3 h-3 rounded-[3px] bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center text-[8px] font-geist">
E
</span>
Engineering
</button>
<button class="w-full flex items-center gap-2 px-2 py-1.5 rounded-[6px] hover:bg-white/5 transition-colors text-[11px] font-medium group font-geist text-gray-500 hover:text-gray-300">
<span class="w-3 h-3 rounded-[3px] border flex items-center justify-center text-[8px] font-geist bg-gray-500/10 border-gray-500/20 text-gray-400">
D
</span>
Design
</button>
</div>
<!-- Bottom Status -->
<div class="mt-auto px-2 pb-1">
<div class="flex items-center gap-2 text-[10px] border-t border-white/5 pt-3 font-geist text-gray-600">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500/80 shadow-[0_0_8px_rgba(16,185,129,0.4)]"></div>
Sync complete
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 bg-[#0C0C0E] flex flex-col relative">
<!-- Toolbar -->
<div class="h-10 border-b border-white/5 flex items-center justify-between px-4">
<div class="flex items-center gap-2">
<span class="text-[11px] font-medium font-geist text-gray-200">
Active Sprint
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</div>
<div class="flex items-center gap-2">
<button class="p-1 hover:bg-white/5 rounded transition-colors text-gray-500 hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M3 6h18" class=""></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" class=""></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" class=""></path>
</svg>
</button>
<div class="w-px h-3 bg-white/5 mx-1"></div>
<span class="text-[10px] font-medium font-geist text-gray-600">
Updated 2m ago
</span>
</div>
</div>
<!-- Content Feed -->
<div class="flex-1 p-4 space-y-4 overflow-y-auto">
<!-- AI Suggestion (Minimalist) -->
<div class="group relative rounded-lg border border-blue-500/20 p-3 overflow-hidden bg-gray-900">
<div class="relative flex items-start gap-3">
<div class="mt-0.5 p-1 rounded-md bg-blue-500/10 border border-blue-500/20 text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" class=""></path>
<path d="M5 3v4" class=""></path>
<path d="M9 3v4" class=""></path>
<path d="M3 5h4" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-[11px] font-semibold font-geist text-gray-200">
Release Notes Draft
</span>
<span class="text-[9px] text-blue-400 font-mono bg-blue-500/10 px-1.5 rounded border border-blue-500/10 font-geist">
AI
</span>
</div>
<p class="text-[11px] leading-relaxed mb-2 font-geist text-gray-400">
Generated changelog for
<span class="font-geist text-gray-200">
v2.4.0
</span>
based on 12 merged PRs.
</p>
<div class="flex items-center gap-2">
<button class="text-[10px] font-medium hover:text-white bg-white/5 hover:bg-white/10 border border-white/5 px-2 py-0.5 rounded transition-colors font-geist text-gray-300">
Review
</button>
<button class="text-[10px] font-medium px-2 py-0.5 transition-colors font-geist text-gray-500 hover:text-gray-400">
Dismiss
</button>
</div>
</div>
</div>
</div>
<!-- Task List -->
<div class="">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-semibold uppercase tracking-wider pl-1 font-geist text-gray-600">
Today
</span>
<div class="h-px flex-1 bg-white/5 ml-3"></div>
</div>
<div class="space-y-0.5">
<!-- Item 1 -->
<div class="group flex items-center gap-3 p-2 rounded hover:bg-white/5 transition-colors cursor-pointer border border-transparent hover:border-white/5">
<div class="w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-colors border-gray-600 group-hover:border-gray-400"></div>
<span class="text-[10px] font-mono w-10 font-geist text-gray-500">
NEU-1
</span>
<span class="text-[11px] font-medium flex-1 truncate font-geist text-gray-300">
Update heuristic models
</span>
<span class="px-1.5 py-0.5 rounded bg-orange-500/10 border border-orange-500/20 text-[9px] font-medium text-orange-400 font-geist">
High
</span>
<span class="text-[10px] font-geist text-gray-600">
Oct 24
</span>
</div>
<!-- Item 2 -->
<div class="group flex items-center gap-3 p-2 rounded hover:bg-white/5 transition-colors cursor-pointer border border-transparent hover:border-white/5">
<div class="relative w-3.5 h-3.5 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</div>
<span class="text-[10px] font-mono w-10 font-geist text-gray-500">
NEU-4
</span>
<span class="text-[11px] flex-1 truncate line-through font-geist text-gray-500 decoration-gray-600">
Refactor data pipeline
</span>
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=32&h=32&fit=crop&crop=faces" class="w-3.5 h-3.5 rounded-full grayscale opacity-60" alt="">
<span class="text-[10px] font-geist text-gray-600">
Oct 23
</span>
</div>
<!-- Item 3 -->
<div class="group flex items-center gap-3 p-2 rounded hover:bg-white/5 transition-colors cursor-pointer border border-transparent hover:border-white/5">
<div class="w-3.5 h-3.5 rounded-full border flex items-center justify-center transition-colors border-gray-600 group-hover:border-gray-400">
<div class="w-1.5 h-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-gray-600"></div>
</div>
<span class="text-[10px] font-mono w-10 font-geist text-gray-500">
NEU-8
</span>
<span class="text-[11px] font-medium flex-1 truncate font-geist text-gray-300">
Client feedback review
</span>
<span class="px-1.5 py-0.5 rounded border text-[9px] font-medium font-geist bg-gray-800 border-gray-700 text-gray-400">
Design
</span>
<span class="text-[10px] font-geist text-gray-600">
Oct 25
</span>
</div>
</div>
</div>
</div>
<!-- Gradient Bottom -->
<div class="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-[#0C0C0E] to-transparent pointer-events-none"></div>
</div>
</div>
</div>
<!-- Floating badge / Context -->
<div class="absolute -right-8 bottom-8 bg-[#141415] border border-white/10 px-3 py-2 rounded-lg shadow-2xl transform rotate-[-4deg] animate-float z-10 hidden lg:flex items-center gap-3">
<div class="flex -space-x-2">
<div class="w-5 h-5 rounded-full border border-[#141415] flex items-center justify-center text-[8px] text-white font-bold font-geist bg-gray-800">
A
</div>
<div class="w-5 h-5 rounded-full bg-blue-600 border border-[#141415] flex items-center justify-center text-[8px] text-white font-bold font-geist">
J
</div>
</div>
<div class="flex flex-col">
<span class="text-[9px] font-medium leading-none font-geist text-gray-400">
2 viewing
</span>
<span class="text-[8px] leading-none mt-0.5 font-geist text-gray-600">
Last edit 2s ago
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>