Proper marquee. Line endings??? Uhhhh....layout. I forgor.

src/app/airstrip_one/0/components/Marquee.css.ts

@@ -6,6 +6,19 @@ export const marquee_container = style({
 	height:          'max-content',
 	overflow:        'hidden',
 	backgroundColor: 'black',
+	fontSize:        '0.75em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '1em',
+		}
+	}
+});
+
+export const marquee_sneaky = style({
+	position:   'absolute',
+	visibility: 'hidden',
+	whiteSpace: 'pre',
+	width:      'max-content',
 });
 
 const scroll_marquee = keyframes({
@@ -15,16 +28,11 @@ const scroll_marquee = keyframes({
 
 export const marquee_content = style({
 	position:                'relative',
-	fontSize:                '0.75em',
 	color:                   'magenta',
-	whiteSpace:              'nowrap',
+	whiteSpace:              'pre',
+	width:                   'max-content',
 	animationName:            scroll_marquee,
-	animationDuration:       '8s',
+	animationDuration:       '2s',
 	animationTimingFunction: 'linear',
 	animationIterationCount: 'infinite',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			fontSize: '1em',
-		}
-	}
 });

src/app/airstrip_one/0/components/Marquee.tsx

@@ -1,13 +1,47 @@
-import {
+'use client'
-	marquee_container,
+
-	marquee_content,
+import { useRef, useEffect, useLayoutEffect } from 'react';
-} from './Marquee.css';
+
+import * as style from './Marquee.css';
 
 export default function Marquee({ children }: { children: React.ReactNode }) {
+	const target_ref        = useRef<HTMLDivElement       | null>(null);
+	const scroll_ref        = useRef<HTMLDivElement       | null>(null);
+	const sneaky_ref        = useRef<HTMLParagraphElement | null>(null);
+	const not_so_sneaky_ref = useRef<HTMLParagraphElement | null>(null);
+
+	function expand_content() {
+		function strip_px(px: string) {
+			return Number(px.substring(0, px.length - 2));
+		}
+		const text         = `${children}`;
+		let   content      = text;
+		const sneaky_width = strip_px(window.getComputedStyle(sneaky_ref.current!).getPropertyValue("width"));
+		let   target_width = strip_px(window.getComputedStyle(target_ref.current!).getPropertyValue("width"));
+		while (target_width > 0) {
+			content += text;
+			target_width -= sneaky_width;
+		}
+		scroll_ref.current!.style.width = `${sneaky_width}px`;
+		not_so_sneaky_ref.current!.textContent = content;
+	}
+
+	useLayoutEffect(expand_content);
+
+	useEffect(() => {
+		window.addEventListener("resize", expand_content);
+
+		return () => {
+			window.removeEventListener("resize", expand_content);
+		}
+	});
+
 	return (
-		<div className={marquee_container}>
+		<div ref={target_ref} className={style.marquee_container}>
-			<p className={marquee_content}>{children}</p>
+			<p ref={sneaky_ref} className={style.marquee_sneaky}>{children}</p>
-			<p className={marquee_content}>{children}</p>
+			<div ref={scroll_ref}>
+				<p ref={not_so_sneaky_ref} className={style.marquee_content}></p>
+			</div>
 		</div>
 	);
 }

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

@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+
+export const center_vertical = style({
+	position:      'relative',
+	display:       'flex',
+	flexDirection: 'column',
+	alignItems:    'center',
+	margin:        'auto',
+	width:         '100%',
+	border:        '0.3em solid purple',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			width: '50%',
+		}
+	}
+});
+

src/app/airstrip_one/0/layout.tsx

@@ -0,0 +1,13 @@
+import Marquee from './components/Marquee';
+
+import * as style from './layout.css';
+
+export default function ExcellentLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={style.center_vertical}>
+			<Marquee>THE SNACK IS WATCHING YOU </Marquee>
+			{children}
+			<Marquee>THE SNACK IS WATCHING YOU </Marquee>
+		</div>
+	);
+}

src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useLayoutEffect, useRef } from 'react';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 import comic_sans from '../../../../comic.ts';
@@ -25,6 +25,19 @@ export default function Input() {
 			?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.'
 		);
 
+	useEffect(() => {
+		function resize_handler() {
+			input_ref.current!.style.height = "";
+			input_ref.current!.style.height = `${input_ref.current!.scrollHeight}px`;
+		}
+
+		window.addEventListener("resize", resize_handler);
+
+		return () => {
+			window.removeEventListener("resize", resize_handler);
+		};
+	});
+
 	useLayoutEffect(() => {
 		set_message(message);
 	});

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

@@ -1,21 +1,5 @@
 import { keyframes, style } from "@vanilla-extract/css";
 
-export const center_vertical = style({
-	boxSizing:     'border-box',
-	position:      'relative',
-	display:       'flex',
-	flexDirection: 'column',
-	alignItems:    'center',
-	margin:        'auto',
-	width:         '100%',
-	border:        '0.3em solid purple',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			width: '50%',
-		}
-	}
-});
-
 export const border = style({
 	width:        '61%',
 	marginBottom: '4em',

src/app/airstrip_one/0/ministry_of_truth/page.tsx

@@ -1,26 +1,17 @@
 import React from 'react';
 import Image from 'next/image';
 import BeegText from '../components/BeegText';
-import Marquee from '../components/Marquee';
 import Input from './components/Input';
-import {
+import * as style from './page.css';
-	center_vertical,
-	border,
-	big_brother_style,
-} from './page.css';
 
 export default function Home() {
-	return (
+	return <>
-		<div className={center_vertical}>
+		<BeegText>THE MINISTRY OF TRUTH</BeegText>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
+		<div className={style.border}>
-			<BeegText>THE MINISTRY OF TRUTH</BeegText>
+			<Image className={style.big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
-			<div className={border}>
+			<React.Suspense>
-				<Image className={big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
+				<Input />
-				<React.Suspense>
+			</React.Suspense>
-					<Input />
-				</React.Suspense>
-			</div>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
 		</div>
-	);
+	</>;
 }

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

@@ -1,20 +1,5 @@
 import { keyframes, style } from "@vanilla-extract/css";
 
-export const center_vertical = style({
-	position:      'relative',
-	display:       'flex',
-	flexDirection: 'column',
-	alignItems:    'center',
-	margin:        'auto',
-	width:         '100%',
-	border:        '0.3em solid purple',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			width: '50%',
-		}
-	}
-});
-
 export const big_brother_style = style({
 	width:  '60%',
 	height: 'auto',

src/app/airstrip_one/0/page.tsx

@@ -1,41 +1,29 @@
-import { Metadata } from 'next'
+import { Metadata } from 'next';
-import Image from 'next/image'
+import Image from 'next/image';
-import Marquee from './components/Marquee'
+import BeegText from './components/BeegText';
-import BeegText from './components/BeegText'
+import * as style from './page.css';
-import {
-	center_vertical,
-	big_brother_style,
-	cats_div,
-	subcats_div,
-	reverse_subcats_div,
-	cat,
-} from './page.css'
 
 export const metadata: Metadata = {
 	title: 'The Snack is Watching You',
 	description: 'The Snack is Watching You',
-}
+};
 
 export default function Home() {
-	return (
+	return <>
-		<div className={center_vertical}>
+		<BeegText>THE SNACK IS</BeegText>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
+		<Image className={style.big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
-			<BeegText>THE SNACK IS</BeegText>
+		<BeegText>WATCHING YOU</BeegText>
-			<Image className={big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
+		<div className={style.cats_div}>
-			<BeegText>WATCHING YOU</BeegText>
+			<div className={style.subcats_div}>
-			<div className={cats_div}>
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-				<div className={subcats_div}>
+				<Image className={style.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={style.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>
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+			<div className={style.reverse_subcats_div}>
-				</div>
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-				<div className={reverse_subcats_div}>
+				<Image className={style.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={style.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 THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
 		</div>
-	)
+	</>;
 }

src/app/layout.tsx

@@ -7,11 +7,7 @@ const comic_sans = localFont({
 	weight: '100',
 });
 
-export default function RootLayout({
+export default function RootLayout({ children }: { children: React.ReactNode }) {
-	children,
-}: {
-	children: React.ReactNode
-}) {
 	return (
 		<html lang="en">
 			<body className={comic_sans.className}>{children}</body>