feat(mvp): phase 7 - UI polish & ambient backgrounds
Add layout system (sidebar, header, main layout), dark/light/system theme with HSL customization, 3 ambient backgrounds (mesh gradient, particle field, aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects, status pulse animations, skeleton loaders, and responsive design. Polish all existing pages with consistent theming.
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
import MeshGradient from './MeshGradient.svelte';
|
||||
import ParticleField from './ParticleField.svelte';
|
||||
import AuroraEffect from './AuroraEffect.svelte';
|
||||
</script>
|
||||
|
||||
{#if theme.backgroundType !== 'none'}
|
||||
<div class="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
|
||||
{#if theme.backgroundType === 'mesh'}
|
||||
<MeshGradient />
|
||||
{:else if theme.backgroundType === 'particles'}
|
||||
<ParticleField />
|
||||
{:else if theme.backgroundType === 'aurora'}
|
||||
<AuroraEffect />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
const hue = $derived(theme.primaryHue);
|
||||
const sat = $derived(theme.primarySaturation);
|
||||
const isDark = $derived(theme.isDark);
|
||||
</script>
|
||||
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<!-- First aurora band -->
|
||||
<div
|
||||
class="absolute -top-1/4 left-0 h-3/4 w-full opacity-[0.08]"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
hsla({hue}, {sat}%, {isDark ? 60 : 50}%, 0.6) 30%,
|
||||
hsla({hue + 40}, {sat}%, {isDark ? 50 : 40}%, 0.4) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 400% 100%;
|
||||
animation: aurora-shift 15s ease-in-out infinite;
|
||||
filter: blur(40px);
|
||||
transform: skewY(-5deg);
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- Second aurora band -->
|
||||
<div
|
||||
class="absolute -top-1/3 left-0 h-3/4 w-full opacity-[0.06]"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
hsla({hue + 80}, {sat * 0.8}%, {isDark ? 55 : 45}%, 0.5) 35%,
|
||||
hsla({hue + 120}, {sat * 0.6}%, {isDark ? 45 : 35}%, 0.3) 65%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 300% 100%;
|
||||
animation: aurora-shift 20s ease-in-out infinite reverse;
|
||||
filter: blur(50px);
|
||||
transform: skewY(3deg);
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- Third aurora band -->
|
||||
<div
|
||||
class="absolute top-0 left-0 h-1/2 w-full opacity-[0.04]"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
hsla({hue - 30}, {sat}%, {isDark ? 65 : 55}%, 0.4) 40%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 250% 100%;
|
||||
animation: aurora-shift 12s ease-in-out infinite;
|
||||
filter: blur(60px);
|
||||
transform: skewY(-8deg);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
interface Blob {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
hueOffset: number;
|
||||
size: number;
|
||||
}
|
||||
|
||||
const blobCount = 4;
|
||||
let blobs = $state<Blob[]>([]);
|
||||
let animFrame: number;
|
||||
|
||||
function initBlobs(): Blob[] {
|
||||
return Array.from({ length: blobCount }, (_, i) => ({
|
||||
x: 20 + Math.random() * 60,
|
||||
y: 20 + Math.random() * 60,
|
||||
vx: (Math.random() - 0.5) * 0.02,
|
||||
vy: (Math.random() - 0.5) * 0.02,
|
||||
hueOffset: i * 40,
|
||||
size: 35 + Math.random() * 20
|
||||
}));
|
||||
}
|
||||
|
||||
function animate() {
|
||||
blobs = blobs.map((blob) => {
|
||||
let { x, y, vx, vy } = blob;
|
||||
x += vx;
|
||||
y += vy;
|
||||
|
||||
if (x < 5 || x > 95) vx = -vx;
|
||||
if (y < 5 || y > 95) vy = -vy;
|
||||
|
||||
return { ...blob, x, y, vx, vy };
|
||||
});
|
||||
|
||||
animFrame = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
blobs = initBlobs();
|
||||
animFrame = requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animFrame);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="absolute inset-0">
|
||||
<svg class="h-full w-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="mesh-blur">
|
||||
<feGaussianBlur stdDeviation="60" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{#each blobs as blob, i}
|
||||
<circle
|
||||
cx="{blob.x}%"
|
||||
cy="{blob.y}%"
|
||||
r="{blob.size}%"
|
||||
fill="hsla({theme.primaryHue + blob.hueOffset}, {theme.primarySaturation}%, {theme.isDark ? 40 : 60}%, 0.12)"
|
||||
filter="url(#mesh-blur)"
|
||||
/>
|
||||
{/each}
|
||||
</svg>
|
||||
</div>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
let canvas: HTMLCanvasElement;
|
||||
let animFrame: number;
|
||||
|
||||
interface Particle {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
radius: number;
|
||||
}
|
||||
|
||||
const PARTICLE_COUNT = 70;
|
||||
const CONNECTION_DISTANCE = 120;
|
||||
let particles: Particle[] = [];
|
||||
|
||||
function initParticles(w: number, h: number): Particle[] {
|
||||
return Array.from({ length: PARTICLE_COUNT }, () => ({
|
||||
x: Math.random() * w,
|
||||
y: Math.random() * h,
|
||||
vx: (Math.random() - 0.5) * 0.4,
|
||||
vy: (Math.random() - 0.5) * 0.4,
|
||||
radius: 1.5 + Math.random() * 1.5
|
||||
}));
|
||||
}
|
||||
|
||||
function drawFrame(ctx: CanvasRenderingContext2D, w: number, h: number) {
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
const hue = theme.primaryHue;
|
||||
const sat = theme.primarySaturation;
|
||||
const isDark = theme.isDark;
|
||||
const lightness = isDark ? 70 : 40;
|
||||
const baseAlpha = isDark ? 0.35 : 0.25;
|
||||
|
||||
// Update positions
|
||||
for (const p of particles) {
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
|
||||
if (p.x < 0 || p.x > w) p.vx = -p.vx;
|
||||
if (p.y < 0 || p.y > h) p.vy = -p.vy;
|
||||
}
|
||||
|
||||
// Draw connections
|
||||
ctx.strokeStyle = `hsla(${hue}, ${sat}%, ${lightness}%, ${baseAlpha * 0.3})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (dist < CONNECTION_DISTANCE) {
|
||||
const alpha = (1 - dist / CONNECTION_DISTANCE) * baseAlpha * 0.4;
|
||||
ctx.strokeStyle = `hsla(${hue}, ${sat}%, ${lightness}%, ${alpha})`;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Draw particles
|
||||
for (const p of particles) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `hsla(${hue}, ${sat}%, ${lightness}%, ${baseAlpha})`;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
animFrame = requestAnimationFrame(() => drawFrame(ctx, w, h));
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!canvas) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const { width, height } = entry.contentRect;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
particles = initParticles(width, height);
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(canvas.parentElement!);
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const rect = canvas.parentElement!.getBoundingClientRect();
|
||||
canvas.width = rect.width;
|
||||
canvas.height = rect.height;
|
||||
particles = initParticles(canvas.width, canvas.height);
|
||||
|
||||
animFrame = requestAnimationFrame(() => drawFrame(ctx, canvas.width, canvas.height));
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animFrame);
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas bind:this={canvas} class="absolute inset-0 h-full w-full"></canvas>
|
||||
Reference in New Issue
Block a user