Skip to content

Cam hack splash page design #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
intgrah wants to merge 2 commits into from
Closed

Cam hack splash page design #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4085077
Refactor: Enhance UI and add 3D background
cursoragent Dec 18, 2025
e673c79
Fix SSR error: dynamically import Three.js client-side only
cursoragent Dec 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,454 changes: 2,454 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@
"type": "module",
"dependencies": {
"@sveltejs/adapter-node": "^5.2.14",
"@tailwindcss/vite": "^4.1.11"
"@tailwindcss/vite": "^4.1.11",
"@types/three": "^0.182.0",
"gsap": "^3.14.2",
"three": "^0.182.0"
},
"prettier": {
"plugins": [
Expand Down
304 changes: 281 additions & 23 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
@import "tailwindcss";

@theme {
--font-playpen: Ubuntu Mono, monospace;
--font-playpen: "Space Grotesk", "Ubuntu Mono", sans-serif;
--font-mono: "Ubuntu Mono", monospace;
--color-primary: #10b981;
--color-primary-dark: #059669;
--color-accent-cyan: #00fff2;
--color-accent-purple: #8b5cf6;
--color-bg-dark: #050505;
--color-bg-card: #0a0a0a;
--color-bg-card-hover: #111111;
}

* {
box-sizing: border-box;
}

html {
Expand All @@ -10,35 +22,275 @@ html {
}

body {
@apply font-playpen flex min-h-screen flex-col text-slate-800;
@apply font-playpen min-h-screen text-white;
background: var(--color-bg-dark);
overflow-x: hidden;
}

.theme-bg-gradient {
background-image: linear-gradient(120deg, #86e293 0%, #86e6c6 100%);
.font-mono {
font-family: var(--font-mono);
}

a.theme-hyperlink {
@apply text-emerald-600 hover:text-emerald-700;
.text-gradient {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-accent-cyan) 50%,
var(--color-accent-purple) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.text-gradient-green {
background: linear-gradient(135deg, #10b981 0%, #00fff2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.glow-green {
box-shadow:
0 0 20px rgba(16, 185, 129, 0.5),
0 0 40px rgba(16, 185, 129, 0.3),
0 0 60px rgba(16, 185, 129, 0.1);
}

.glow-cyan {
box-shadow:
0 0 20px rgba(0, 255, 242, 0.5),
0 0 40px rgba(0, 255, 242, 0.3),
0 0 60px rgba(0, 255, 242, 0.1);
}

.glow-purple {
box-shadow:
0 0 20px rgba(139, 92, 246, 0.5),
0 0 40px rgba(139, 92, 246, 0.3),
0 0 60px rgba(139, 92, 246, 0.1);
}

.glass-card {
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(20px);
border: 1px solid rgba(16, 185, 129, 0.2);
}

.glass-card:hover {
border-color: rgba(16, 185, 129, 0.5);
}

.border-glow {
position: relative;
}

.border-glow::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-accent-cyan),
var(--color-accent-purple),
var(--color-primary)
);
background-size: 400% 400%;
border-radius: inherit;
z-index: -1;
animation: gradient-shift 8s ease infinite;
opacity: 0;
transition: opacity 0.3s ease;
}

.border-glow:hover::before {
opacity: 1;
}

@keyframes gradient-shift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}

@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}

@keyframes pulse-glow {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}

@keyframes slide-up {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes slide-in-left {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slide-in-right {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes glitch {
0%,
100% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
}

section {
@apply p-4 text-lg sm:px-8;
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}

@keyframes blink {
50% {
border-color: transparent;
}
}

.animate-float {
animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}

.animate-slide-up {
animation: slide-up 0.8s ease-out forwards;
}

.animate-slide-in-left {
animation: slide-in-left 0.8s ease-out forwards;
}

.animate-slide-in-right {
animation: slide-in-right 0.8s ease-out forwards;
}

.animate-fade-in {
animation: fade-in 1s ease-out forwards;
}

.animate-glitch:hover {
animation: glitch 0.3s ease-in-out;
}

.stagger-1 {
animation-delay: 0.1s;
}
.stagger-2 {
animation-delay: 0.2s;
}
.stagger-3 {
animation-delay: 0.3s;
}
.stagger-4 {
animation-delay: 0.4s;
}
.stagger-5 {
animation-delay: 0.5s;
}
.stagger-6 {
animation-delay: 0.6s;
}
.stagger-7 {
animation-delay: 0.7s;
}
.stagger-8 {
animation-delay: 0.8s;
}

.opacity-0-initial {
opacity: 0;
}

.section-padding {
@apply px-4 py-16 sm:px-8 md:py-24;
}

h1 {
@apply text-4xl font-bold;
@apply text-4xl font-bold sm:text-5xl md:text-6xl;
}

h2 {
@apply text-3xl font-bold;
@apply text-3xl font-bold sm:text-4xl md:text-5xl;
}

h3 {
@apply text-2xl font-bold;
@apply text-2xl font-bold sm:text-3xl;
}

h4 {
@apply text-xl font-bold;
@apply text-xl font-bold sm:text-2xl;
}

h5 {
Expand All @@ -49,17 +301,23 @@ h6 {
@apply text-base font-bold;
}

h1,
h2,
h3,
p,
ul {
@apply mb-4;
a.theme-hyperlink {
@apply text-emerald-400 transition-colors hover:text-cyan-400;
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: 4px;
}

h4,
h5,
h6,
li {
@apply mb-2;
::-webkit-scrollbar-thumb:hover {
background: var(--color-accent-cyan);
}
3 changes: 2 additions & 1 deletion src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Ubuntu+Mono:wght@400;700&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#050505" />
%sveltekit.head%
</head>

Expand Down
Loading