From c97746fd83b2ac916914831835bd443bf61c8097 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?= <35082514+alezmad@users.noreply.github.com> Date: Mon, 23 Feb 2026 23:46:51 +0000 Subject: [PATCH] Add terminal cascade animation to hero with two-column layout Right column shows a looping cause-and-effect animation: cladm console selects projects one by one, then Claude Code terminals cascade in with spring-bounce animation showing the real welcome screen. Co-Authored-By: Claude Opus 4.6 --- site/app/globals.css | 37 +++++++ site/app/page.tsx | 81 ++++++++------- site/app/terminal-cascade.tsx | 176 +++++++++++++++++++++++++++++++++ site/public/claude-welcome.png | Bin 0 -> 66620 bytes 4 files changed, 258 insertions(+), 36 deletions(-) create mode 100644 site/app/terminal-cascade.tsx create mode 100644 site/public/claude-welcome.png diff --git a/site/app/globals.css b/site/app/globals.css index f283e31..7186e8b 100644 --- a/site/app/globals.css +++ b/site/app/globals.css @@ -82,6 +82,43 @@ body { .float-delay { animation: float 3s ease-in-out 0.7s infinite; } .float-delay-2 { animation: float 3s ease-in-out 1.4s infinite; } +/* Terminal cascade */ +@keyframes cascadeIn { + 0% { + opacity: 0; + transform: translateY(50px) scale(0.88); + } + 65% { + opacity: 1; + transform: translateY(-6px) scale(1.015); + } + 82% { + transform: translateY(2px) scale(0.997); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} +@keyframes cascadeGlow { + 0%, 100% { border-color: #333333; } + 50% { border-color: #e07850; } +} +@keyframes flash { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} +.cascade-flash { + animation: flash 0.3s ease-in-out 2; +} +.cascade-in { + animation: cascadeIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; +} +.cascade-glow { + animation: cascadeIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both, + cascadeGlow 2s ease-in-out 1.2s infinite; +} + /* Key cap */ .keycap { display: inline-block; diff --git a/site/app/page.tsx b/site/app/page.tsx index 4a7dadf..e7b13ab 100644 --- a/site/app/page.tsx +++ b/site/app/page.tsx @@ -1,5 +1,6 @@ import Image from "next/image"; import { EmailReveal } from "./email-reveal"; +import { TerminalCascade } from "./terminal-cascade"; import { SearchIcon, GithubIcon, @@ -98,9 +99,9 @@ export default function Home() { }} /> -
+
{/* Nav */} -