trevato/trevato.dev

Public: anyone can read this; the crew can change it.

More
Mapg aRunsg rEventsFlows

feat: Add Tokyo Drift theme with neon teal and pink colorway #18

Trevato opened this view on origin

Check · Review · Land · Live — Its check is red. Next: builder, its check is red.

ConversationFiles
Ready to land

claude/tokyo-drift-theme-011CUURupeVH4iJSZpWZj7aJ → main 2 commits

  • Ready to merge — no conflicts with main. 2 commits will land on main.

    Check faileddeploy 0d36571

    You need write access to merge.

A guest

This pull comes from a guest: its preview runs without the app's variables or a forge token until a person who can write here approves it.

This pull waits for a person who can write here to review it; it never lands on its own.

Review

Sign in to review this change.
2 files changed +108 −42
src/app/globals.css +105 −40
@@ -1,39 +1,56 @@
11 @tailwind base;
22 @tailwind components;
33 @tailwind utilities;
4
4
55 @layer base {
66 :root {
7 --background: 222.2 84% 4.9%;
8 --foreground: 210 40% 98%;
9
10 --card: 222.2 84% 4.9%;
11 --card-foreground: 210 40% 98%;
12
13 --popover: 222.2 84% 4.9%;
14 --popover-foreground: 210 40% 98%;
15
16 --primary: 217.2 91.2% 59.8%;
17 --primary-foreground: 222.2 47.4% 11.2%;
18
19 --secondary: 217.2 32.6% 17.5%;
20 --secondary-foreground: 210 40% 98%;
21
22 --muted: 217.2 32.6% 17.5%;
23 --muted-foreground: 215 20.2% 65.1%;
24
25 --accent: 217.2 32.6% 17.5%;
26 --accent-foreground: 210 40% 98%;
27
28 --destructive: 0 62.8% 30.6%;
29 --destructive-foreground: 210 40% 98%;
30
31 --border: 217.2 32.6% 17.5%;
32 --input: 217.2 32.6% 17.5%;
33 --ring: 224.3 76.3% 48%;
7 /* Tokyo Drift Theme - Rainy Night Vibes */
8 /* Dark, moody with strategic orange, cyan, and purple pops */
9
10 --background: 265 35% 4%;
11 --foreground: 200 15% 92%;
12
13 --card: 265 30% 7%;
14 --card-foreground: 200 15% 92%;
15
16 --popover: 265 30% 7%;
17 --popover-foreground: 200 15% 92%;
18
19 /* Primary: Iconic Tokyo Drift Orange - street lights, RX-7 */
20 --primary: 12 83% 58%;
21 --primary-foreground: 0 0% 100%;
22
23 /* Secondary: Cool cyan - neon signs, wet reflections */
24 --secondary: 189 81% 40%;
25 --secondary-foreground: 0 0% 100%;
26
27 /* Muted: Darker versions */
28 --muted: 265 25% 15%;
29 --muted-foreground: 189 15% 65%;
30
31 /* Accent: Deep purple - neon depth */
32 --accent: 269 73% 35%;
33 --accent-foreground: 0 0% 100%;
34
35 --destructive: 0 85% 55%;
36 --destructive-foreground: 0 0% 100%;
37
38 /* Borders: Dark with cyan tint */
39 --border: 189 40% 20%;
40 --input: 265 30% 10%;
41
42 /* Ring: Orange glow for focus states */
43 --ring: 12 83% 58%;
44
45 /* Chart colors: Mix of orange, cyan, purple */
46 --chart-1: 12 83% 58%;
47 --chart-2: 189 81% 40%;
48 --chart-3: 269 73% 45%;
49 --chart-4: 340 75% 55%;
50 --chart-5: 189 60% 55%;
3451 }
3552 }
36
53
3754 @layer base {
3855 * {
3956 @apply border-border;
@@ -43,18 +60,28 @@
4360 }
4461 }
4562
46 /* Custom styles */
63 /* Tokyo Drift Custom Styles - Rainy Night Edition */
4764 body {
48 background: linear-gradient(to bottom, #000000, #001f3f);
65 /* Deep black to dark purple gradient - wet asphalt at night */
66 background: linear-gradient(to bottom, #000000, #0d0a1f, #1a0f2e);
4967 min-height: 100vh;
5068 }
5169
70 /* Orange street light glow */
5271 .text-glow {
53 text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
72 text-shadow:
73 0 0 20px rgba(236, 95, 59, 0.5),
74 0 0 40px rgba(236, 95, 59, 0.3),
75 0 0 60px rgba(236, 95, 59, 0.2);
5476 }
5577
78 /* Multi-colored neon border - orange, cyan, purple layers */
5679 .neon-border {
57 box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), inset 0 0 10px rgba(59, 130, 246, 0.5);
80 box-shadow:
81 0 0 5px rgba(236, 95, 59, 0.4),
82 0 0 10px rgba(20, 157, 186, 0.3),
83 0 0 15px rgba(61, 17, 107, 0.2),
84 inset 0 0 8px rgba(236, 95, 59, 0.2);
5885 }
5986
6087 @keyframes pulse {
@@ -62,7 +89,7 @@ body {
6289 opacity: 1;
6390 }
6491 50% {
65 opacity: 0.5;
92 opacity: 0.6;
6693 }
6794 }
6895
@@ -86,18 +113,56 @@ body {
86113 animation: float 6s ease-in-out infinite;
87114 }
88115
116 /* Updated glow animation with Tokyo Drift colors */
89117 @keyframes glow {
90118 0% {
91 box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
119 box-shadow:
120 0 0 5px rgba(236, 95, 59, 0.4),
121 0 0 10px rgba(20, 157, 186, 0.3),
122 0 0 15px rgba(61, 17, 107, 0.2);
92123 }
93 50% {
94 box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
124 33% {
125 box-shadow:
126 0 0 10px rgba(236, 95, 59, 0.6),
127 0 0 20px rgba(20, 157, 186, 0.4),
128 0 0 30px rgba(61, 17, 107, 0.3);
129 }
130 66% {
131 box-shadow:
132 0 0 8px rgba(20, 157, 186, 0.5),
133 0 0 15px rgba(236, 95, 59, 0.4),
134 0 0 25px rgba(61, 17, 107, 0.3);
95135 }
96136 100% {
97 box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
137 box-shadow:
138 0 0 5px rgba(236, 95, 59, 0.4),
139 0 0 10px rgba(20, 157, 186, 0.3),
140 0 0 15px rgba(61, 17, 107, 0.2);
98141 }
99142 }
100143
101144 .animate-glow {
102 animation: glow 3s ease-in-out infinite;
103 }↵
145 animation: glow 4s ease-in-out infinite;
146 }
147
148 /* Additional Tokyo Drift specific effects */
149 .tokyo-glow-orange {
150 box-shadow:
151 0 0 10px rgba(236, 95, 59, 0.6),
152 0 0 20px rgba(236, 95, 59, 0.4),
153 0 0 30px rgba(236, 95, 59, 0.2);
154 }
155
156 .tokyo-glow-cyan {
157 box-shadow:
158 0 0 10px rgba(20, 157, 186, 0.6),
159 0 0 20px rgba(20, 157, 186, 0.4),
160 0 0 30px rgba(20, 157, 186, 0.2);
161 }
162
163 .tokyo-glow-purple {
164 box-shadow:
165 0 0 10px rgba(61, 17, 107, 0.6),
166 0 0 20px rgba(61, 17, 107, 0.4),
167 0 0 30px rgba(61, 17, 107, 0.2);
168 }
src/components/SpaceBackground.tsx +3 −2
@@ -40,7 +40,8 @@ export const SpaceBackground: React.FC<{ children: React.ReactNode }> = ({ child
4040
4141 function createExplosion(x: number, y: number) {
4242 const particleCount = 50
43 const colors = ['#ffffff', '#ffc0cb', '#e6e6fa', '#dda0dd', '#ff69b4', '#da70d6', '#8a2be2', '#9370db', '#7b68ee', '#4b0082']
43 // Tokyo Drift colors: orange (RX-7), cyan (neon), purple (neon depth), white (headlights)
44 const colors = ['#ec5f3b', '#ff8c5a', '#149dba', '#3eb8d4', '#3d116b', '#6a2aa1', '#ffffff', '#ffa500', '#00c5ff']
4445 for (let i = 0; i < particleCount; i++) {
4546 particles.push({
4647 x,
@@ -125,7 +126,7 @@ export const SpaceBackground: React.FC<{ children: React.ReactNode }> = ({ child
125126 }, [])
126127
127128 return (
128 <div className="relative min-h-screen overflow-hidden bg-gradient-to-b from-black to-blue-900">
129 <div className="relative min-h-screen overflow-hidden bg-gradient-to-b from-black via-purple-950/20 to-purple-950/40">
129130 <canvas
130131 ref={canvasRef}
131132 className="absolute inset-0 w-full h-full"

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs