chore: add demo site

website/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

website/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

website/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

website/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

website/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "vercel-open",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "~2.1.3",
+    "@radix-ui/react-slot": "~1.1.1",
+    "class-variance-authority": "~0.7.1",
+    "clsx": "~2.1.1",
+    "lucide-react": "~0.468.0",
+    "next": "15.1.0",
+    "next-themes": "~0.4.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-fast-marquee": "~1.6.5",
+    "react-snowfall": "~2.2.0",
+    "tailwind-merge": "~2.5.5",
+    "tailwindcss-animate": "~1.0.7"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

website/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

website/src/app/globals.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  cursor: none;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

website/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import './globals.css'
+
+import { ThemeProvider } from '@/components/theme-provider'
+// import { ModeToggle } from '@/components/toggle-theme'
+
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'npm install -g vercel-open',
+  description: 'The vercel-open custom command extension for the Vercel CLI'
+}
+
+export default function RootLayout ({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang='en' suppressHydrationWarning>
+      <meta name='twitter:label1' content='installation' />
+      <meta name='twitter:data1' content='npm install -g vercel-open'></meta>
+      <body className='bg-black'>
+        <a
+          href='https://github.com/vercel-labs/vercel-open'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <ThemeProvider attribute='class' forcedTheme='light' disableTransitionOnChange>
+            {/* <ModeToggle /> */}
+            {children}
+          </ThemeProvider>
+        </a>
+      </body>
+    </html>
+  )
+}

website/src/app/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Heading } from '@/components/heading'
+import { Cursor } from '@/components/cursor'
+import { Marquee } from '@/components/marquee'
+import Snowfall from 'react-snowfall'
+
+export default function Home () {
+  return (
+    <>
+      <Marquee direction='left' position='top' />
+      <main className='flex min-h-screen items-center justify-center bg-background text-foreground p-4 overflow-hidden relative border-8 border-foreground cursor-none'>
+        <Snowfall snowflakeCount={50} style={{ position: 'fixed' }} />
+        <Heading />
+        <Cursor />
+      </main>
+      <Marquee />
+    </>
+  )
+}

website/src/components/cursor.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function Cursor () {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  useEffect(() => {
+    const updatePosition = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY })
+    }
+
+    window.addEventListener('mousemove', updatePosition)
+
+    return () => window.removeEventListener('mousemove', updatePosition)
+  }, [])
+
+  return (
+    <div
+      className='pointer-events-none fixed z-50'
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        width: 0,
+        height: 0,
+        borderLeft: '10px solid transparent',
+        borderRight: '10px solid transparent',
+        borderBottom: '20px solid white',
+        transform: 'translate(-50%, -50%) rotate(0)'
+      }}
+    />
+  )
+}

website/src/components/heading.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function Heading () {
+  const [fontSize, setFontSize] = useState(10)
+  const [stretch, setStretch] = useState(100)
+
+  useEffect(() => {
+    const updateSizes = () => {
+      const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+      const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+      const borderWidth = 16 // 8px on each side
+      const marqueeHeight = 48 // Increased to account for potentially larger text
+      const newSize = Math.min((vw - borderWidth) / 12, (vh - borderWidth - marqueeHeight) / 4)
+      setFontSize(newSize)
+      setStretch(
+        Math.min(300, 100 + ((vh - borderWidth - marqueeHeight) / (vw - borderWidth)) * 100)
+      )
+    }
+
+    updateSizes()
+    window.addEventListener('resize', updateSizes)
+    return () => window.removeEventListener('resize', updateSizes)
+  }, [])
+
+  return (
+    <h1
+      className='text-center font-mono whitespace-nowrap tracking-tighter select-none'
+      style={{
+        fontSize: `${fontSize}px`,
+        transform: `scaleY(${stretch}%)`,
+        transformOrigin: 'center center',
+        lineHeight: '1'
+      }}
+    >
+      npm install -g
+      <br />
+      vercel-open
+    </h1>
+  )
+}

website/src/components/marquee.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import MarqueeBase from 'react-fast-marquee'
+import { cn } from '@/lib/utils'
+
+export function Marquee (
+  {
+    position = 'bottom',
+    direction = 'right'
+  }: {
+    position?: 'top' | 'bottom'
+    direction?: 'left' | 'right'
+  } = {
+    position: 'bottom',
+    direction: 'right'
+  }
+) {
+  const classNamePosition = position === 'top' ? '' : 'bottom-0 left-0 right-0'
+  return (
+    <div className={cn('overflow-hidden text-white py-6 absolute select-none', classNamePosition)}>
+      <div className='whitespace-nowrap inline-block font-mono text-lg text-foreground'>
+        <MarqueeBase autoFill direction={direction}>
+          Breaking news Vercel stocks now available &nbsp;&nbsp;&nbsp; Hackathon 2024
+          &nbsp;&nbsp;&nbsp; Merry Christmas and a Happy New Year &nbsp;&nbsp;&nbsp; Breaking news
+          Vercel stocks now available &nbsp;&nbsp;&nbsp; Hackathon 2024 &nbsp;&nbsp;&nbsp; Merry
+          Christmas and a Happy New Year &nbsp;&nbsp;&nbsp;
+        </MarqueeBase>
+      </div>
+    </div>
+  )
+}