From f983eb9db360e9403d5744a84566ddf18cb87a6c Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Fri, 26 Dec 2025 00:30:31 +0500 Subject: [PATCH 01/23] feat: introduce interactive 2.5D hero visual, enhance video demo with browser frame UI, and update video masking styles. --- apps/playgrounds/node/index.ts | 2 + apps/www/app/(home)/page.tsx | 4 +- apps/www/app/globals.css | 13 +++ apps/www/components/hero-video.tsx | 12 ++ apps/www/components/hero-visual.tsx | 141 ++++++++++++++++++++++++ apps/www/components/page/video-demo.tsx | 83 ++++++++------ 6 files changed, 222 insertions(+), 33 deletions(-) create mode 100644 apps/www/components/hero-visual.tsx diff --git a/apps/playgrounds/node/index.ts b/apps/playgrounds/node/index.ts index 84bbc2dc1..555f58c1b 100644 --- a/apps/playgrounds/node/index.ts +++ b/apps/playgrounds/node/index.ts @@ -16,4 +16,6 @@ console.log({ debugging: env.DEBUGGING, }); +console.log(env.PORT); + export default env; diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx index 81eb14a25..d3358fc2b 100644 --- a/apps/www/app/(home)/page.tsx +++ b/apps/www/app/(home)/page.tsx @@ -1,6 +1,6 @@ import type { Metadata } from "next"; import { Bricolage_Grotesque } from "next/font/google"; -import { HeroVideo } from "~/components/hero-video"; +import { HeroVisual } from "~/components/hero-visual"; import { SailButton, StarUsButton, VideoDemo } from "~/components/page"; const bricolageGrotesque = Bricolage_Grotesque({ @@ -96,7 +96,7 @@ export default function HomePage() {
- +
diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css index c1b9ae84e..a0921e594 100644 --- a/apps/www/app/globals.css +++ b/apps/www/app/globals.css @@ -27,3 +27,16 @@ button[data-search-full] { background-color: var(--background); background-image: none !important; } + +@keyframes spin-slow { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.animate-spin-slow { + animation: spin-slow 60s linear infinite; +} diff --git a/apps/www/components/hero-video.tsx b/apps/www/components/hero-video.tsx index 3f4cc129b..e01f5a6f0 100644 --- a/apps/www/components/hero-video.tsx +++ b/apps/www/components/hero-video.tsx @@ -28,6 +28,12 @@ export function HeroVideo() { className={`absolute inset-0 w-full h-full object-contain ${ resolvedTheme === "dark" ? "opacity-0" : "opacity-100" }`} + style={{ + maskImage: + "radial-gradient(circle at center, black 40%, transparent 75%)", + WebkitMaskImage: + "radial-gradient(circle at center, black 40%, transparent 75%)", + }} />