Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add a white theme

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-11 16:02:55 +01:00
parent 9642f2511a
commit d5d7b15f16
22 changed files with 297 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/DragonEye.tsx
View File

@@ -1,9 +1,12 @@
"use client";
import { useEffect, useRef } from "react";
import { useTheme } from "@/lib/theme";
export default function DragonEye({ size = 60 }: { size?: number }) {
const irisRef = useRef<HTMLDivElement>(null);
const { theme } = useTheme();
const isLight = theme === "light";
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
@@ -26,6 +29,22 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
const h = size;
const w = size * 1.6;
// Light theme: sky-blue palette
const glowColor = isLight ? "#38bdf8" : "#4aff8c";
const eyeBg = isLight
? "radial-gradient(ellipse at 40% 35%, #e0f7ff, #b8eeff)"
: "radial-gradient(ellipse at 40% 35%, #0a1a0a, #020402)";
const eyeBorder = isLight ? "rgba(56,189,248,0.4)" : "rgba(74,255,140,0.25)";
const eyeShadow = isLight
? "0 0 20px rgba(56,189,248,0.25), inset 0 0 10px rgba(56,189,248,0.1)"
: "0 0 20px rgba(74,255,140,0.1), inset 0 0 20px rgba(0,0,0,0.8)";
const irisBg = isLight
? "radial-gradient(ellipse at 40% 35%, #7dd3fc 0%, #0ea5e9 35%, #0369a1 70%)"
: "radial-gradient(ellipse at 40% 35%, #1aff6a 0%, #0a8a3a 35%, #022a12 70%)";
const irisShadow = isLight ? "0 0 12px rgba(56,189,248,0.6)" : "0 0 12px rgba(74,255,140,0.4)";
const pupilBg = isLight ? "#001a2e" : "#010801";
const eyelidBg = isLight ? "#dbeafe" : "#0a0d0f";
return (
<div
className="relative flex-shrink-0"
@@ -35,7 +54,7 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
<div
className="absolute inset-0 rounded-full blur-md opacity-30"
style={{
background: "radial-gradient(ellipse, #4aff8c 0%, transparent 70%)",
background: `radial-gradient(ellipse, ${glowColor} 0%, transparent 70%)`,
borderRadius: "50%",
}}
/>
@@ -45,9 +64,9 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
className="absolute inset-0 overflow-hidden"
style={{
borderRadius: "50%",
background: "radial-gradient(ellipse at 40% 35%, #0a1a0a, #020402)",
border: "1px solid rgba(74,255,140,0.25)",
boxShadow: "0 0 20px rgba(74,255,140,0.1), inset 0 0 20px rgba(0,0,0,0.8)",
background: eyeBg,
border: `1px solid ${eyeBorder}`,
boxShadow: eyeShadow,
animation: "blink 9s ease-in-out infinite",
}}
>
@@ -60,8 +79,8 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
width: h * 0.65,
height: h * 0.65,
borderRadius: "50%",
background: "radial-gradient(ellipse at 40% 35%, #1aff6a 0%, #0a8a3a 35%, #022a12 70%)",
boxShadow: "0 0 12px rgba(74,255,140,0.4)",
background: irisBg,
boxShadow: irisShadow,
transition: "transform 0.08s ease-out",
}}
>
@@ -72,19 +91,20 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
transform: "translate(-50%, -50%)",
width: h * 0.1,
height: h * 0.55,
background: "#010801",
background: pupilBg,
borderRadius: "50%",
boxShadow: "0 0 6px rgba(0,0,0,0.9)",
animation: "pupilDilate 7s ease-in-out infinite",
}}
/>
{/* Highlight */}
<div
className="absolute"
style={{
top: "18%", left: "22%",
width: h * 0.12, height: h * 0.08,
background: "rgba(200,255,220,0.4)",
background: isLight ? "rgba(255,255,255,0.7)" : "rgba(200,255,220,0.4)",
borderRadius: "50%",
transform: "rotate(-20deg)",
filter: "blur(1px)",
@@ -97,7 +117,7 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
className="absolute top-0 left-0 right-0"
style={{
height: "30%",
background: "linear-gradient(to bottom, #0a0d0f, rgba(10,13,15,0.5))",
background: `linear-gradient(to bottom, ${eyelidBg}, transparent)`,
borderRadius: "50% 50% 0 0 / 80% 80% 0 0",
zIndex: 2,
}}
@@ -107,7 +127,7 @@ export default function DragonEye({ size = 60 }: { size?: number }) {
className="absolute bottom-0 left-0 right-0"
style={{
height: "22%",
background: "linear-gradient(to top, #0a0d0f, rgba(10,13,15,0.5))",
background: `linear-gradient(to top, ${eyelidBg}, transparent)`,
borderRadius: "0 0 50% 50% / 0 0 80% 80%",
zIndex: 2,
}}