3 files changed, 62 insertions, 33 deletions

diff --git a/apps/web/src/constants/animation-constants.ts b/apps/web/src/constants/animation-constants.ts
new file mode 100644
index 00000000..44776d34
--- /dev/null
+++ b/apps/web/src/constants/animation-constants.ts
@@ -0,0 +1,2 @@
+export const TIME_EPSILON_SECONDS = 1 / 1000;
+export const MIN_TRANSFORM_SCALE = 0.01;
diff --git a/apps/web/src/constants/text-constants.ts b/apps/web/src/constants/text-constants.ts
index f0b2143d..6b688ed1 100644
--- a/apps/web/src/constants/text-constants.ts
+++ b/apps/web/src/constants/text-constants.ts
@@ -17,6 +17,15 @@ export const FONT_SIZE_SCALE_REFERENCE = 90;
 export const DEFAULT_LETTER_SPACING = 0;
 export const DEFAULT_LINE_HEIGHT = 1.2;
 
+export const DEFAULT_TEXT_BACKGROUND = {
+	color: "#000000",
+	cornerRadius: 0,
+	paddingX: 30,
+	paddingY: 42,
+	offsetX: 0,
+	offsetY: 0,
+};
+
 export const DEFAULT_TEXT_ELEMENT: Omit<TextElement, "id"> = {
 	type: "text",
 	name: "Text",
@@ -24,7 +33,7 @@ export const DEFAULT_TEXT_ELEMENT: Omit<TextElement, "id"> = {
 	fontSize: 15,
 	fontFamily: "Arial",
 	color: "#ffffff",
-	backgroundColor: "#000000",
+	background: DEFAULT_TEXT_BACKGROUND,
 	textAlign: "center",
 	fontWeight: "normal",
 	fontStyle: "normal",
diff --git a/apps/web/src/constants/timeline-constants.tsx b/apps/web/src/constants/timeline-constants.tsx
index 5ac0913a..5bc938bb 100644
--- a/apps/web/src/constants/timeline-constants.tsx
+++ b/apps/web/src/constants/timeline-constants.tsx
@@ -3,6 +3,7 @@ import type { BlendMode } from "@/types/rendering";
 import type { TrackType, Transform } from "@/types/timeline";
 import {
 	Happy01Icon,
+	MagicWand05Icon,
 	MusicNote03Icon,
 	TextIcon,
 } from "@hugeicons/core-free-icons";
@@ -19,26 +20,65 @@ export const DEFAULT_OPACITY = 1;
 export const DEFAULT_BLEND_MODE: BlendMode = "normal";
 export const DEFAULT_BOOKMARK_COLOR = "#009dff";
 
-export const TRACK_COLORS: Record<TrackType, { background: string }> = {
+export const TRACK_CONFIG: Record<
+	TrackType,
+	{
+		background: string;
+		height: number;
+		defaultName: string;
+		icon: React.ReactNode;
+	}
+> = {
 	video: {
 		background: "transparent",
+		height: 60,
+		defaultName: "Video track",
+		icon: <OcVideoIcon className="text-muted-foreground size-4 shrink-0" />,
 	},
 	text: {
 		background: "bg-[#5DBAA0]",
+		height: 25,
+		defaultName: "Text track",
+		icon: (
+			<HugeiconsIcon
+				icon={TextIcon}
+				className="text-muted-foreground size-4 shrink-0"
+			/>
+		),
 	},
 	audio: {
-		background: "bg-[#915DBE]",
+		background: "bg-[#8F5DBA]",
+		height: 50,
+		defaultName: "Audio track",
+		icon: (
+			<HugeiconsIcon
+				icon={MusicNote03Icon}
+				className="text-muted-foreground size-4 shrink-0"
+			/>
+		),
 	},
 	sticker: {
-		background: "bg-amber-500",
+		background: "bg-[#BA5D7A]",
+		height: 50,
+		defaultName: "Sticker track",
+		icon: (
+			<HugeiconsIcon
+				icon={Happy01Icon}
+				className="text-muted-foreground size-4 shrink-0"
+			/>
+		),
+	},
+	effect: {
+		background: "bg-[#5d93ba]",
+		height: 25,
+		defaultName: "Effect track",
+		icon: (
+			<HugeiconsIcon
+				icon={MagicWand05Icon}
+				className="text-muted-foreground size-4 shrink-0"
+			/>
+		),
 	},
-} as const;
-
-export const TRACK_HEIGHTS: Record<TrackType, number> = {
-	video: 60,
-	text: 25,
-	audio: 50,
-	sticker: 50,
 } as const;
 
 export const TRACK_GAP = 4;
@@ -60,25 +100,3 @@ export const DEFAULT_TIMELINE_VIEW_STATE: TTimelineViewState = {
 	scrollLeft: 0,
 	playheadTime: 0,
 };
-
-export const TRACK_ICONS: Record<TrackType, React.ReactNode> = {
-	video: <OcVideoIcon className="text-muted-foreground size-4 shrink-0" />,
-	text: (
-		<HugeiconsIcon
-			icon={TextIcon}
-			className="text-muted-foreground size-4 shrink-0"
-		/>
-	),
-	audio: (
-		<HugeiconsIcon
-			icon={MusicNote03Icon}
-			className="text-muted-foreground size-4 shrink-0"
-		/>
-	),
-	sticker: (
-		<HugeiconsIcon
-			icon={Happy01Icon}
-			className="text-muted-foreground size-4 shrink-0"
-		/>
-	),
-} as const;