From c5d96a0ded593cb9e270db6ca7eec031a17f5a98 Mon Sep 17 00:00:00 2001
From: Manu Arora <manuarorawork@gmail.com>
Date: Wed, 9 Jul 2025 17:30:37 +0530
Subject: [PATCH 1/2] add: actual handlebars to resize container

---
 .../web/src/components/landing/handlebars.tsx | 163 ++++++++++++++++++
 apps/web/src/components/landing/hero.tsx      |  10 +-
 2 files changed, 165 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/components/landing/handlebars.tsx

diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
new file mode 100644
index 0000000..832a923
--- /dev/null
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -0,0 +1,163 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import { motion, useMotionValue, useTransform, PanInfo } from "motion/react";
+
+interface HandlebarsProps {
+  children: React.ReactNode;
+  minWidth?: number;
+  maxWidth?: number;
+  onRangeChange?: (left: number, right: number) => void;
+}
+
+export const Handlebars = ({
+  children,
+  minWidth = 50,
+  maxWidth = 400,
+  onRangeChange,
+}: HandlebarsProps) => {
+  const [leftHandle, setLeftHandle] = useState(0);
+  const [rightHandle, setRightHandle] = useState(maxWidth);
+  const [contentWidth, setContentWidth] = useState(maxWidth);
+
+  const leftHandleX = useMotionValue(0);
+  const rightHandleX = useMotionValue(maxWidth);
+
+  const visibleWidth = useTransform(
+    [leftHandleX, rightHandleX],
+    (values: number[]) => values[1] - values[0]
+  );
+
+  const contentLeft = useTransform(leftHandleX, (left: number) => -left);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!measureRef.current) return;
+
+    const measureContent = () => {
+      if (measureRef.current) {
+        const width = measureRef.current.scrollWidth;
+        const paddedWidth = width + 32;
+        setContentWidth(paddedWidth);
+        setRightHandle(paddedWidth);
+        rightHandleX.set(paddedWidth);
+      }
+    };
+
+    measureContent();
+    const timer = setTimeout(measureContent, 50);
+
+    return () => clearTimeout(timer);
+  }, [children, rightHandleX]);
+
+  useEffect(() => {
+    leftHandleX.set(leftHandle);
+  }, [leftHandle, leftHandleX]);
+
+  useEffect(() => {
+    rightHandleX.set(rightHandle);
+  }, [rightHandle, rightHandleX]);
+
+  useEffect(() => {
+    onRangeChange?.(leftHandle, rightHandle);
+  }, [leftHandle, rightHandle, onRangeChange]);
+
+  const handleLeftDrag = (event: any, info: PanInfo) => {
+    const newLeft = Math.max(
+      0,
+      Math.min(leftHandle + info.offset.x, rightHandle - minWidth)
+    );
+    setLeftHandle(newLeft);
+  };
+
+  const handleRightDrag = (event: any, info: PanInfo) => {
+    const newRight = Math.max(
+      leftHandle + minWidth,
+      Math.min(contentWidth, rightHandle + info.offset.x)
+    );
+    setRightHandle(newRight);
+  };
+
+  return (
+    <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
+      <div
+        ref={measureRef}
+        className="absolute -left-[9999px] top-0 invisible px-4 whitespace-nowrap font-[inherit]"
+      >
+        {children}
+      </div>
+
+      <div
+        ref={containerRef}
+        className="relative -rotate-[2.76deg] max-w-[250px] md:max-w-[454px] mt-2"
+        style={{ width: contentWidth }}
+      >
+        <div className="absolute inset-0 w-full h-full rounded-2xl border border-[#FFCC02] flex justify-between">
+          <motion.div
+            className="h-full border border-[#FFCC02] w-7 rounded-full bg-[#2A2A2A] flex items-center justify-center cursor-ew-resize select-none"
+            style={{
+              position: "absolute",
+              x: leftHandleX,
+              left: 0,
+              zIndex: 10,
+            }}
+            drag="x"
+            dragConstraints={{ left: 0, right: rightHandle - minWidth }}
+            dragElastic={0}
+            dragMomentum={false}
+            onDrag={handleLeftDrag}
+            whileHover={{ scale: 1.05 }}
+            whileDrag={{ scale: 1.1 }}
+            transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          >
+            <div className="w-2 h-8 rounded-full bg-[#FFCC02]"></div>
+          </motion.div>
+
+          <motion.div
+            className="h-full border border-[#FFCC02] w-7 rounded-full bg-[#2A2A2A] flex items-center justify-center cursor-ew-resize select-none"
+            style={{
+              position: "absolute",
+              x: rightHandleX,
+              left: -30,
+              zIndex: 10,
+            }}
+            drag="x"
+            dragConstraints={{
+              left: leftHandle + minWidth,
+              right: contentWidth,
+            }}
+            dragElastic={0}
+            dragMomentum={false}
+            onDrag={handleRightDrag}
+            whileHover={{ scale: 1.05 }}
+            whileDrag={{ scale: 1.1 }}
+            transition={{ type: "spring", stiffness: 400, damping: 30 }}
+          >
+            <div className="w-2 h-8 rounded-full bg-[#FFCC02]"></div>
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="relative overflow-hidden rounded-2xl"
+          style={{
+            width: visibleWidth,
+            x: leftHandleX,
+            height: "100%",
+          }}
+        >
+          <motion.div
+            className="w-full h-full flex items-center justify-center px-4"
+            style={{
+              x: contentLeft,
+              width: contentWidth,
+              whiteSpace: "nowrap",
+            }}
+          >
+            {children}
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index d45f33e..a71bee9 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 
 import Image from "next/image";
+import { Handlebars } from "./handlebars";
 
 interface HeroProps {
   signupCount: number;
@@ -91,14 +92,7 @@ export function Hero({ signupCount }: HeroProps) {
           className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]"
         >
           <h1>The Open Source</h1>
-          <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
-            <div className="relative -rotate-[2.76deg] max-w-[250px] md:max-w-[454px] mt-2">
-              <Image src="/frame.svg" height={79} width={459} alt="frame" />
-              <span className="absolute inset-0 flex items-center justify-center">
-                Video Editor
-              </span>
-            </div>
-          </div>
+          <Handlebars>Video Editor</Handlebars>
         </motion.div>
 
         <motion.p

From 145d01c8e49ff37fea2f222af2244bdc2880735e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 12 Jul 2025 16:50:34 +0200
Subject: [PATCH 2/2] cleanup

---
 apps/web/src/components/landing/handlebars.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 832a923..36705e9 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useState, useRef, useEffect } from "react";
 import { motion, useMotionValue, useTransform, PanInfo } from "motion/react";
 
@@ -9,12 +10,12 @@ interface HandlebarsProps {
   onRangeChange?: (left: number, right: number) => void;
 }
 
-export const Handlebars = ({
+export function Handlebars({
   children,
   minWidth = 50,
   maxWidth = 400,
   onRangeChange,
-}: HandlebarsProps) => {
+}: HandlebarsProps) {
   const [leftHandle, setLeftHandle] = useState(0);
   const [rightHandle, setRightHandle] = useState(maxWidth);
   const [contentWidth, setContentWidth] = useState(maxWidth);
@@ -93,9 +94,9 @@ export const Handlebars = ({
         className="relative -rotate-[2.76deg] max-w-[250px] md:max-w-[454px] mt-2"
         style={{ width: contentWidth }}
       >
-        <div className="absolute inset-0 w-full h-full rounded-2xl border border-[#FFCC02] flex justify-between">
+        <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between">
           <motion.div
-            className="h-full border border-[#FFCC02] w-7 rounded-full bg-[#2A2A2A] flex items-center justify-center cursor-ew-resize select-none"
+            className="h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none"
             style={{
               position: "absolute",
               x: leftHandleX,
@@ -111,11 +112,11 @@ export const Handlebars = ({
             whileDrag={{ scale: 1.1 }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-[#FFCC02]"></div>
+            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
           </motion.div>
 
           <motion.div
-            className="h-full border border-[#FFCC02] w-7 rounded-full bg-[#2A2A2A] flex items-center justify-center cursor-ew-resize select-none"
+            className="h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center cursor-ew-resize select-none"
             style={{
               position: "absolute",
               x: rightHandleX,
@@ -134,7 +135,7 @@ export const Handlebars = ({
             whileDrag={{ scale: 1.1 }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-[#FFCC02]"></div>
+            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
           </motion.div>
         </div>