UI Components

All UI components follow the GuiBase pattern — module side-effect imports that register with UiManager before Flamework ignites.

Component Registration

// src/client/ui/components/index.ts
import "./VingetteController";
import "./BushController";
import "./DeathController";
import "./DragBarController";
import "./QueueController";

Components are imported as side effects, registering their panes with UiManager. They can be shown/hidden programmatically:

UiManager.Show("DeathController");
UiManager.Hide("QueueController");

Components

VingetteController

Red vignette overlay driven by the insanity system.

• Transparency = 1 - insanityAtom()
• Full-screen ImageLabel
• Always mounted, visibility controlled by insanity value

BushController

Leaf overlay that appears when hiding in a bush.

• Shows leaves image at screen edges
• Triggered by interaction controller when entering bush
• Fades out on exit

DeathController

Full-screen death screen with run statistics.

• Displays: cause of death, run duration, distance traveled, enemies encountered
• Respawn button with 3-second cooldown timer
• Fires requestRespawn remote on click
• Motion-driven fade-in animation

DragBarController

Escape bar for FlowerTrap drag mechanic.

• Progress bar with color gradient: red → yellow → green
• Player mashes to fill the bar and escape
• Driven by DragProgress ECS component value
• Disappears when escape succeeds or player dies

QueueController

Queue status pane for the lobby system.

• Shows player count, target count, countdown timer
• Join/leave buttons
• Host controls for starting the game
• Hidden by default, shown when touching queue zone
• State managed via queue-atoms.ts

Animation Pattern

UI components use createMotion() from @rbxts/ripple for spring-based animations:

const fadeMotion = createMotion(0, { frequency: 4, dampingRatio: 1 });
fadeMotion.spring(1); // animate to target
fadeMotion.onStep((value) => {
    frame.BackgroundTransparency = 1 - value;
});