Created website

src/app/airstrip_one/0/page.css.ts

@@ -0,0 +1,94 @@
+import { keyframes, style } from "@vanilla-extract/css";
+
+export const center_vertical = style({
+	position:      'relative',
+	display:       'flex',
+	flexDirection: 'column',
+	alignItems:    'center',
+	margin:        'auto',
+	width:         '50%',
+	border:        '0.3em solid purple'
+})
+
+export const marquee_container = style({
+	display:         'flex',
+	width:           '100%',
+	height:          'max-content',
+	overflow:        'hidden',
+	backgroundColor: 'black',
+})
+
+const scroll_marquee = keyframes({
+	'0%':   { left: '   0%' },
+	'100%': { left: '-100%' },
+})
+
+export const marquee_content = style({
+	position:                'relative',
+	fontSize:                '1em',
+	color:                   'magenta',
+	whiteSpace:              'nowrap',
+	animationName:            scroll_marquee,
+	animationDuration:       '8s',
+	animationTimingFunction: 'linear',
+	animationIterationCount: 'infinite',
+})
+
+export const beeg_container = style({
+	position: 'relative',
+	width:    'max-content',
+	height:   'max-content',
+})
+
+const beeg = style({
+	position: 'absolute',
+	fontSize: '3em',
+})
+
+export const beeg_dummy = style([beeg, {
+	position: 'static',
+	color:    'transparent',
+}])
+
+export const beeg_foreground = style([beeg, {
+	background:     'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)',
+	backgroundClip: 'text',
+	color:          'transparent',
+}])
+
+export const beeg_background = style([beeg, {
+	left:           '-0.1em',
+	top:            ' 0.1em',
+	color:          'black',
+}])
+
+export const big_brother_style = style({
+	width:  '40%',
+	height: 'auto',
+	border: '0.3em solid purple'
+})
+
+export const cats_div = style({
+	display:        'flex',
+	flexDirection:  'row',
+	justifyContent: 'space-between',
+	width:          '100%',
+	borderTop:      '0.3em solid purple'
+})
+
+export const subcats_div = style({
+	display:        'flex',
+	justifyContent: 'flex-start',
+	width:          '50%',
+	height:         'max-content',
+})
+
+export const reverse_subcats_div = style([subcats_div, {
+	transform: 'scale(-1, 1)'
+}])
+
+export const cat = style({
+	display: 'block',
+	width:   '25%',
+	height:  'auto',
+})

src/app/airstrip_one/0/page.tsx

@@ -0,0 +1,58 @@
+import Image from 'next/image'
+import {
+	center_vertical,
+	marquee_container,
+	marquee_content,
+	beeg_container,
+	beeg_foreground,
+	beeg_background,
+	big_brother_style,
+	cats_div,
+	subcats_div,
+	reverse_subcats_div,
+	cat,
+	beeg_dummy,
+} from './page.css'
+
+function BeegText({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={beeg_container}>
+			<p className={beeg_background}>{children}</p>
+			<p className={beeg_foreground}>{children}</p>
+			<p className={beeg_dummy}     >{children}</p>
+		</div>
+	)
+}
+
+function Marquee({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={marquee_container}>
+			<p className={marquee_content}>{children}</p>
+			<p className={marquee_content}>{children}</p>
+		</div>
+	)
+}
+
+export default function Home() {
+	return (
+		<div className={center_vertical}>
+			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
+			<BeegText>THE SNACK IS</BeegText>
+			<Image className={big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
+			<BeegText>WATCHING YOU</BeegText>
+			<div className={cats_div}>
+				<div className={subcats_div}>
+					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+				</div>
+				<div className={reverse_subcats_div}>
+					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+				</div>
+			</div>
+			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
+		</div>
+	)
+}

src/app/global.css.ts

@@ -0,0 +1,9 @@
+import { globalStyle } from "@vanilla-extract/css"
+
+export const global_style = globalStyle('html,body', {
+	margin:           '0',
+	width:            '100%',
+	height:           '100%',
+	backgroundImage:  'url("/background.png")',
+	backgroundRepeat: 'repeat'
+})

src/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next'
+import localFont from 'next/font/local'
+import './global.css'
+
+export const metadata: Metadata = {
+	title: 'The Snack is Watching You',
+	description: 'The Snack is Watching You',
+}
+
+const comic_sans = localFont({
+	src:    './comic.ttf',
+	weight: '100',
+})
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode
+}) {
+	return (
+		<html lang="en">
+			<body className={comic_sans.className}>{children}</body>
+		</html>
+	)
+}