feat:Add fluid text Component

components/Block.tsx

@@ -15,6 +15,7 @@ import {
 import { motion } from 'framer-motion';
 import { getSocialPlatformOption, inferSocialPlatformFromUrl } from '../socialPlatforms';
 import { openSafeUrl, isValidYouTubeChannelId, isValidLocationString } from '../utils/security';
+import FluidTextEffect from './FluidTextEffect';
 
 // Apple TV style 3D tilt effect hook
 const useTiltEffect = (isEnabled: boolean = true) => {
@@ -1117,6 +1118,15 @@ const Block: React.FC<BlockProps> = ({
                 </div>
               )}
             </div>
+          ) : block.type === BlockType.FLUID_TEXT ? (
+            <div className="w-full h-full pointer-events-auto">
+              <FluidTextEffect
+                text={block.title || 'Text'}
+                fontSize={block.fluidTextFontSize ?? 0.33}
+                colorClass={block.color}
+                customBackground={block.customBackground}
+              />
+            </div>
           ) : isRichYoutube ? (
             /* YOUTUBE SINGLE VIDEO - Clean design with just play button */
             <div className="w-full h-full relative">

components/BlockPreview.tsx

@@ -3,6 +3,7 @@ import { BlockData, BlockType } from '../types';
 import { Youtube, Play, Loader2 } from 'lucide-react';
 import { getSocialPlatformOption, inferSocialPlatformFromUrl } from '../socialPlatforms';
 import { openSafeUrl, isValidYouTubeChannelId, isValidLocationString } from '../utils/security';
+import FluidTextEffect from './FluidTextEffect';
 
 // Apple TV style 3D tilt effect hook
 const useTiltEffect = (isEnabled: boolean = true) => {
@@ -465,6 +466,15 @@ const BlockPreview: React.FC<BlockPreviewProps> = ({
                 </div>
               )}
             </div>
+          ) : block.type === BlockType.FLUID_TEXT ? (
+            <div className="w-full h-full pointer-events-auto">
+              <FluidTextEffect
+                text={block.title || 'Text'}
+                fontSize={block.fluidTextFontSize ?? 0.33}
+                colorClass={block.color}
+                customBackground={block.customBackground}
+              />
+            </div>
           ) : isRichYoutube ? (
             /* YOUTUBE SINGLE */
             <div className="w-full h-full relative">

components/Builder.tsx

@@ -631,6 +631,7 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
     const getSpans = () => {
       if (type === BlockType.SOCIAL_ICON) return { colSpan: 1, rowSpan: 1 };
       if (type === BlockType.SPACER) return { colSpan: 9, rowSpan: 1 };
+      if (type === BlockType.FLUID_TEXT) return { colSpan: 6, rowSpan: 3 };
       return { colSpan: 3, rowSpan: 3 }; // Regular blocks take 3x3 cells
     };
     const { colSpan, rowSpan } = getSpans();
@@ -647,7 +648,9 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
               ? 'Location'
               : type === BlockType.SPACER
                 ? 'Spacer'
-                : 'New Block',
+                : type === BlockType.FLUID_TEXT
+                  ? 'Fluid Text'
+                  : 'New Block',
       content: '',
       colSpan,
       rowSpan,
@@ -656,14 +659,17 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
           ? 'bg-transparent'
           : type === BlockType.SOCIAL_ICON
             ? 'bg-gray-100'
-            : 'bg-white',
-      textColor: 'text-gray-900',
+            : type === BlockType.FLUID_TEXT
+              ? 'bg-violet-500'
+              : 'bg-white',
+      textColor: type === BlockType.FLUID_TEXT ? 'text-white' : 'text-gray-900',
       gridColumn: gridPosition.col,
       gridRow: gridPosition.row,
       ...(type === BlockType.SOCIAL ? { socialPlatform: 'x' as const, socialHandle: '' } : {}),
       ...(type === BlockType.SOCIAL_ICON
         ? { socialPlatform: 'instagram' as const, socialHandle: '' }
         : {}),
+      ...(type === BlockType.FLUID_TEXT ? { fluidTextFontSize: 0.33 } : {}),
     };
     handleSetBlocks([...blocks, newBlock]);
     setEditingBlockId(newBlock.id);

components/EditorSidebar.tsx

@@ -20,6 +20,7 @@ import {
   List,
   Palette,
   CheckCircle2,
+  Droplets,
 } from 'lucide-react';
 import {
   buildSocialUrl,
@@ -307,15 +308,19 @@ const EditorSidebar: React.FC<EditorSidebarProps> = ({
                       htmlFor="block-title-input"
                       className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2"
                     >
-                      Title
+                      {editingBlock.type === BlockType.FLUID_TEXT ? 'Text' : 'Title'}
                     </label>
                     <input
                       id="block-title-input"
                       type="text"
                       className="w-full bg-gray-50 border border-gray-200 rounded-xl p-3.5 focus:ring-2 focus:ring-black/5 focus:border-black focus:outline-none transition-all font-medium"
                       value={editingBlock.title || ''}
                       onChange={(e) => updateBlock({ ...editingBlock, title: e.target.value })}
-                      placeholder="Label your block"
+                      placeholder={
+                        editingBlock.type === BlockType.FLUID_TEXT
+                          ? 'Enter text'
+                          : 'Label your block'
+                      }
                     />
                   </div>
                 )}
@@ -728,6 +733,27 @@ const EditorSidebar: React.FC<EditorSidebarProps> = ({
               )}
 
               {/* 4. CONTENT FIELDS (Standard) */}
+              {editingBlock.type === BlockType.FLUID_TEXT && (
+                <div>
+                  <label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
+                    Font Size ({Math.round((editingBlock.fluidTextFontSize ?? 0.33) * 100)}%)
+                  </label>
+                  <input
+                    type="range"
+                    min="0.1"
+                    max="0.8"
+                    step="0.01"
+                    value={editingBlock.fluidTextFontSize ?? 0.33}
+                    onChange={(e) =>
+                      updateBlock({
+                        ...editingBlock,
+                        fluidTextFontSize: Number(e.target.value),
+                      })
+                    }
+                    className="w-full h-2 cursor-pointer appearance-none rounded-lg bg-gray-200"
+                  />
+                </div>
+              )}
               {(editingBlock.type === BlockType.LINK ||
                 editingBlock.type === BlockType.MEDIA ||
                 editingBlock.type === BlockType.MAP) && (
@@ -913,6 +939,12 @@ const EditorSidebar: React.FC<EditorSidebarProps> = ({
                   { type: BlockType.SOCIAL, label: 'Social', icon: Github, color: 'bg-violet-600' },
                   { type: BlockType.MEDIA, label: 'Media', icon: ImageIcon, color: 'bg-pink-600' },
                   { type: BlockType.TEXT, label: 'Note', icon: TypeIcon, color: 'bg-emerald-600' },
+                  {
+                    type: BlockType.FLUID_TEXT,
+                    label: 'Text Fluid Effect',
+                    icon: Droplets,
+                    color: 'bg-indigo-600',
+                  },
                   { type: BlockType.MAP, label: 'Map', icon: MapPin, color: 'bg-amber-500' },
                   {
                     type: BlockType.SPACER,