feat: bolder ascii

Author: Rieranthony

apps/web/src/app/(lander-docs)/components/browser-with-background-layer.tsx

@@ -3,7 +3,5 @@
 import { Background } from "@/components/ui/background";
 
 export function BrowserWithBackgroundLayer() {
-	return (
-		<Background asciiOpacity={0.5} fieldOpacity={0.14} resolution={0.05} />
-	);
+	return <Background fieldOpacity={0.14} />;
 }

apps/web/src/app/(lander-docs)/components/footer.tsx

@@ -103,11 +103,11 @@ export function Footer() {
 			</div>
 			<div className="flex flex-col items-center justify-between border-t border-dashed md:items-start">
 				<div className="container-wrapper relative mx-auto">
-					<div className="absolute inset-x-0 top-0 z-50 flex justify-between gap-4 p-4">
+					<div className="absolute inset-x-0 top-0 z-50 flex flex-col justify-between gap-4 p-4 md:flex-row">
 						<p className="px-6 text-center font-mono text-foreground/60 text-sm md:text-left lg:px-0">
 							© 2025 cossistant. open source under GPL-3.0 license.
 						</p>
-						<div className="mt-4 flex items-center space-x-6 px-6 md:mt-0 lg:px-0">
+						<div className="mx-auto mt-4 flex items-center space-x-6 px-6 md:mx-0 md:mt-0 lg:px-0">
 							<Link
 								className="font-mono text-foreground/60 text-sm transition-colors hover:text-foreground"
 								href="/privacy"
@@ -133,17 +133,17 @@ export function Footer() {
 					</div>
 					<div className="pointer-events-none h-100 min-h-100 w-full" />
 					<Background
-						asciiOpacity={1}
 						className="absolute inset-0 z-0"
 						fieldOpacity={0.06}
 						interactive={true}
 						pointerTrail={true}
-						resolution={0.13}
+						pointerTrailRadius={0.2}
 					/>
 
-					<div className="pointer-events-none absolute inset-x-0 top-0 z-0 h-40 w-full bg-linear-to-b from-background to-transparent" />
+					<div className="pointer-events-none absolute inset-x-0 top-0 z-0 h-100 w-full bg-linear-to-b from-background to-transparent md:h-40" />
 					<div className="pointer-events-none absolute inset-x-0 top-0 z-0 h-20 w-full bg-linear-to-b from-background to-transparent" />
-					<LogoTextSVG className="pointer-events-none absolute inset-x-0 bottom-20 z-50 w-full text-background" />
+					<LogoTextSVG className="pointer-events-none absolute inset-x-0 bottom-20 z-50 hidden w-full text-background md:block" />
+					<Logo className="pointer-events-none absolute inset-x-0 bottom-4 z-50 mx-auto block size-56 w-full text-background md:hidden" />
 				</div>
 			</div>
 		</footer>

apps/web/src/app/(lander-docs)/components/precision-flow-playback.tsx

@@ -507,13 +507,7 @@ function PrecisionFlowRightPanel({ children }: { children: React.ReactNode }) {
 			className="relative flex h-full w-full flex-1 overflow-hidden bg-background dark:bg-background-50"
 			data-precision-background-trail="enabled"
 		>
-			<Background
-				asciiOpacity={0.4}
-				fieldOpacity={0.06}
-				interactive={true}
-				pointerTrail={true}
-				resolution={0.05}
-			/>
+			<Background fieldOpacity={0.06} interactive={true} pointerTrail={true} />
 			<div className="pointer-events-none relative z-10 flex h-full w-full flex-1 px-4 pb-16 lg:px-8 lg:py-16 xl:px-1">
 				{children}
 			</div>

apps/web/src/components/support/demo-landing/index.tsx

@@ -6,7 +6,7 @@ import { Background } from "@/components/ui/background";
 function CossistantLandingSupport() {
 	return (
 		<div className="cossistant relative h-full w-full">
-			<Background asciiOpacity={0.5} fieldOpacity={0.14} />
+			<Background fieldOpacity={0.14} />
 			<FakeSupportWidget />
 		</div>
 	);

apps/web/src/components/ui/background.shared.ts

@@ -7,10 +7,10 @@ export const MAX_BACKGROUND_FIELD_CELLS = 9000;
 export const MAX_BACKGROUND_ASCII_CELLS = 20_000;
 export const DEFAULT_BACKGROUND_DESKTOP_RESOLUTION = 0.06;
 export const DEFAULT_BACKGROUND_MOBILE_RESOLUTION = 0.08;
-export const DEFAULT_BACKGROUND_DESKTOP_FPS = 12;
+export const DEFAULT_BACKGROUND_DESKTOP_FPS = 31;
 export const DEFAULT_BACKGROUND_MOBILE_FPS = 8;
-export const DEFAULT_BACKGROUND_POINTER_TRAIL_INTENSITY = 0.75;
-export const DEFAULT_BACKGROUND_POINTER_TRAIL_RADIUS = 0.11;
+export const DEFAULT_BACKGROUND_POINTER_TRAIL_INTENSITY = 0.3;
+export const DEFAULT_BACKGROUND_POINTER_TRAIL_RADIUS = 0.05;
 export const DEFAULT_BACKGROUND_POINTER_TRAIL_LIFETIME_MS = 1350;
 export const MAX_BACKGROUND_POINTER_TRAIL_BLOBS = 20;
 export const MIN_BACKGROUND_POINTER_TRAIL_DISTANCE_PX = 18;

apps/web/src/components/ui/background.tsx

@@ -231,7 +231,7 @@ function samplePointerTrailInfluence(
 
 export function Background({
 	accentColorVar = "--cossistant-orange",
-	asciiOpacity = 0.62,
+	asciiOpacity = 1,
 	characterPalette = "detailed",
 	characters,
 	className = "",
@@ -246,7 +246,7 @@ export function Background({
 	pointerTrailLifetimeMs = DEFAULT_BACKGROUND_POINTER_TRAIL_LIFETIME_MS,
 	pointerTrailRadius = DEFAULT_BACKGROUND_POINTER_TRAIL_RADIUS,
 	reactivity = 0.28,
-	resolution,
+	resolution = 0.15,
 	reverse = false,
 	seed,
 	speed = 1,