@shohojdhara/atomix 0.4.8 → 0.5.0

package/src/components/AtomixGlass/stories/Playground.stories.tsx

@@ -289,7 +289,31 @@ const BackgroundWrapper = ({
 export const Playground: Story = {
   render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [settings, setSettings] = useState({
+    const [settings, setSettings] = useState<{
+      displacementScale: number;
+      blurAmount: number;
+      saturation: number;
+      aberrationIntensity: number;
+      elasticity: number;
+      borderRadius: number;
+      overLight: boolean;
+      reducedMotion: boolean;
+      highContrast: boolean;
+      withoutEffects: boolean;
+      withLiquidBlur: boolean;
+      withBorder: boolean;
+      withTimeAnimation: boolean;
+      animationSpeed: number;
+      withMultiLayerDistortion: boolean;
+      distortionOctaves: number;
+      distortionLacunarity: number;
+      distortionGain: number;
+      distortionQuality: 'low' | 'medium' | 'high' | 'ultra';
+      devicePreset: 'performance' | 'balanced' | 'quality';
+      disableResponsiveBreakpoints: boolean;
+      debugPerformance: boolean;
+      debugOverLight: boolean;
+    }>({
       displacementScale: 40,
       blurAmount: 1,
       saturation: 140,
@@ -302,6 +326,17 @@ export const Playground: Story = {
       withoutEffects: false,
       withLiquidBlur: false,
       withBorder: true,
+      withTimeAnimation: true,
+      animationSpeed: 1.0,
+      withMultiLayerDistortion: false,
+      distortionOctaves: 3,
+      distortionLacunarity: 2.0,
+      distortionGain: 0.5,
+      distortionQuality: 'medium',
+      devicePreset: 'balanced',
+      disableResponsiveBreakpoints: false,
+      debugPerformance: false,
+      debugOverLight: false,
     });
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -325,7 +360,7 @@ export const Playground: Story = {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [copiedCode, setCopiedCode] = useState(false);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [controlTab, setControlTab] = useState<'optics' | 'physics' | 'flags'>('optics');
+    const [controlTab, setControlTab] = useState<'optics' | 'animation' | 'responsive' | 'flags'>('optics');
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const backgroundsArrayRef = useRef<typeof backgrounds | null>(null);
 
@@ -346,6 +381,17 @@ export const Playground: Story = {
           withoutEffects: false,
           withLiquidBlur: false,
           withBorder: true,
+          withTimeAnimation: false,
+          animationSpeed: 1.0,
+          withMultiLayerDistortion: false,
+          distortionOctaves: 3,
+          distortionLacunarity: 2.0,
+          distortionGain: 0.5,
+          distortionQuality: 'medium' as const,
+          devicePreset: 'balanced' as const,
+          disableResponsiveBreakpoints: false,
+          debugPerformance: false,
+          debugOverLight: false,
         },
         mode: 'standard' as const,
         shader: 'liquidGlass' as const,
@@ -366,6 +412,17 @@ export const Playground: Story = {
           withoutEffects: false,
           withLiquidBlur: false,
           withBorder: true,
+          withTimeAnimation: true,
+          animationSpeed: 1.0,
+          withMultiLayerDistortion: false,
+          distortionOctaves: 3,
+          distortionLacunarity: 2.0,
+          distortionGain: 0.5,
+          distortionQuality: 'medium' as const,
+          devicePreset: 'balanced' as const,
+          disableResponsiveBreakpoints: false,
+          debugPerformance: false,
+          debugOverLight: false,
         },
         mode: 'standard' as const,
         shader: 'liquidGlass' as const,
@@ -386,6 +443,17 @@ export const Playground: Story = {
           withoutEffects: false,
           withLiquidBlur: true,
           withBorder: true,
+          withTimeAnimation: true,
+          animationSpeed: 1.2,
+          withMultiLayerDistortion: true,
+          distortionOctaves: 5,
+          distortionLacunarity: 2.5,
+          distortionGain: 0.6,
+          distortionQuality: 'high' as const,
+          devicePreset: 'quality' as const,
+          disableResponsiveBreakpoints: false,
+          debugPerformance: false,
+          debugOverLight: false,
         },
         mode: 'prominent' as const,
         shader: 'plasma' as const,
@@ -406,6 +474,17 @@ export const Playground: Story = {
           withoutEffects: false,
           withLiquidBlur: true,
           withBorder: true,
+          withTimeAnimation: true,
+          animationSpeed: 1.5,
+          withMultiLayerDistortion: true,
+          distortionOctaves: 6,
+          distortionLacunarity: 3.0,
+          distortionGain: 0.7,
+          distortionQuality: 'ultra' as const,
+          devicePreset: 'quality' as const,
+          disableResponsiveBreakpoints: false,
+          debugPerformance: false,
+          debugOverLight: false,
         },
         mode: 'shader' as const,
         shader: 'waves' as const,
@@ -435,6 +514,15 @@ export const Playground: Story = {
   withoutEffects={${settings.withoutEffects}}
   withLiquidBlur={${settings.withLiquidBlur}}
   withBorder={${settings.withBorder}}
+  withTimeAnimation={${settings.withTimeAnimation}}
+  animationSpeed={${settings.animationSpeed}}
+  withMultiLayerDistortion={${settings.withMultiLayerDistortion}}
+  distortionOctaves={${settings.distortionOctaves}}
+  distortionLacunarity={${settings.distortionLacunarity}}
+  distortionGain={${settings.distortionGain}}
+  distortionQuality="${settings.distortionQuality}"
+  devicePreset="${settings.devicePreset}"
+  disableResponsiveBreakpoints={${settings.disableResponsiveBreakpoints}}
 >
   <div className="your-content">
     {/* Your content here */}
@@ -723,7 +811,7 @@ export const Playground: Story = {
                         </div>
                         <div>
                           <div
-                            className="u-font-bold u-fs-sm"
+                            className="u-font-bold u-text-sm"
                             style={{
                               background:
                                 'linear-gradient(90deg, #fff 0%, rgba(122,255,215,0.9) 100%)',
@@ -735,7 +823,7 @@ export const Playground: Story = {
                           >
                             AtomixGlass Playground
                           </div>
-                          <div className="u-fs-xs u-opacity-60 u-mt-1">Live parameter editor</div>
+                          <div className="u-text-xs u-opacity-60 u-mt-1">Live parameter editor</div>
                         </div>
                       </div>
                     </div>
@@ -750,11 +838,11 @@ export const Playground: Story = {
                     }}
                   >
                     <div className="u-flex u-justify-between u-items-center u-mb-2">
-                      <span className="u-text-white u-font-semibold u-fs-xs">
+                      <span className="u-text-white u-font-semibold u-text-xs">
                         Performance Score
                       </span>
                       <span
-                        className="u-font-bold u-fs-sm"
+                        className="u-font-bold u-text-sm"
                         style={{ color: getPerformanceColor() }}
                       >
                         {Math.round(performanceScore)}/100
@@ -792,7 +880,7 @@ export const Playground: Story = {
                   {/* Quick Presets */}
                   <div className="u-mb-4">
                     <label
-                      className="u-block u-mb-2 u-text-white u-font-semibold u-fs-xs"
+                      className="u-block u-mb-2 u-text-white u-font-semibold u-text-xs"
                       style={{ letterSpacing: '0.5px' }}
                     >
                       ⚡ Quick Presets
@@ -851,11 +939,11 @@ export const Playground: Story = {
                       border: '1px solid rgba(255,255,255,0.1)',
                     }}
                   >
-                    {(['optics', 'physics', 'flags'] as const).map(tab => (
+                    {(['optics', 'animation', 'responsive', 'flags'] as const).map(tab => (
                       <button
                         key={tab}
                         onClick={() => setControlTab(tab)}
-                        className="u-flex-grow-1 u-py-2 u-fs-xs u-font-bold u-rounded-pill u-cursor-pointer"
+                        className="u-flex-grow-1 u-py-2 u-text-xs u-font-bold u-rounded-pill u-cursor-pointer"
                         style={{
                           background: controlTab === tab ? 'rgba(255,255,255,0.1)' : 'transparent',
                           color: controlTab === tab ? '#fff' : 'rgba(255,255,255,0.5)',
@@ -885,7 +973,7 @@ export const Playground: Story = {
                             }}
                           />
                           <span
-                            className="u-fs-xs u-font-bold u-opacity-60"
+                            className="u-text-xs u-font-bold u-opacity-60"
                             style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                           >
                             Optics
@@ -918,11 +1006,11 @@ export const Playground: Story = {
                           return (
                             <div key={key} className="u-mb-4">
                               <div className="u-flex u-justify-between u-items-baseline u-mb-1">
-                                <label className="u-fs-xs u-font-medium u-opacity-80">
+                                <label className="u-text-xs u-font-medium u-opacity-80">
                                   {label}
                                 </label>
                                 <span
-                                  className="u-fs-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                  className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
                                   style={{
                                     background: 'rgba(122,255,215,0.12)',
                                     color: '#7AFFD7',
@@ -968,69 +1056,179 @@ export const Playground: Story = {
                       </div>
                     )}
 
-                    {/* === CONTROLS: PHYSICS === */}
-                    {controlTab === 'physics' && (
-                      <div className="u-mb-4 u-animation-fade-in">
-                        <div className="u-flex u-items-center u-gap-2 u-mb-3">
-                          <div
-                            style={{
-                              width: '3px',
-                              height: '14px',
-                              background: 'linear-gradient(180deg, #a78bfa 0%, #ec4899 100%)',
-                              borderRadius: '2px',
-                              flexShrink: 0,
-                            }}
-                          />
-                          <span
-                            className="u-fs-xs u-font-bold u-opacity-60"
-                            style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
-                          >
-                            Physics
-                          </span>
+                    {/* === CONTROLS: ANIMATION (PHASE 1) === */}
+                    {controlTab === 'animation' && (
+                      <>
+                        <div className="u-mb-4 u-animation-fade-in">
+                          <div className="u-flex u-items-center u-gap-2 u-mb-3">
+                            <div
+                              style={{
+                                width: '3px',
+                                height: '14px',
+                                background: 'linear-gradient(180deg, #a78bfa 0%, #ec4899 100%)',
+                                borderRadius: '2px',
+                                flexShrink: 0,
+                              }}
+                            />
+                            <span
+                              className="u-text-xs u-font-bold u-opacity-60"
+                              style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
+                            >
+                              Physics
+                            </span>
+                          </div>
+                          {(['elasticity', 'borderRadius'] as const).map(key => {
+                            const value = settings[key];
+                            const max = key === 'borderRadius' ? 100 : 1;
+                            const step = key === 'elasticity' ? 0.01 : 1;
+                            const label = key
+                              .replace(/([A-Z])/g, ' $1')
+                              .replace(/^./, s => s.toUpperCase());
+                            return (
+                              <div key={key} className="u-mb-4">
+                                <div className="u-flex u-justify-between u-items-baseline u-mb-1">
+                                  <label className="u-text-xs u-font-medium u-opacity-80">
+                                    {label}
+                                  </label>
+                                  <span
+                                    className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                    style={{
+                                      background: 'rgba(167,139,250,0.12)',
+                                      color: '#a78bfa',
+                                      fontVariantNumeric: 'tabular-nums',
+                                      minWidth: '40px',
+                                      textAlign: 'center',
+                                    }}
+                                  >
+                                    {(value as number).toFixed(key === 'elasticity' ? 2 : 0)}
+                                  </span>
+                                </div>
+                                <div className="u-relative" style={{ height: '20px' }}>
+                                  <input
+                                    type="range"
+                                    min={0}
+                                    max={max}
+                                    step={step}
+                                    value={value as number}
+                                    onChange={e =>
+                                      setSettings(prev => ({
+                                        ...prev,
+                                        [key]: parseFloat(e.target.value),
+                                      }))
+                                    }
+                                    className="premium-slider u-absolute u-w-100 u-m-0"
+                                    style={{
+                                      height: '2px',
+                                      background: `linear-gradient(to right, #a78bfa ${((value as number) / max) * 100}%, rgba(255,255,255,0.15) ${((value as number) / max) * 100}%)`,
+                                      borderRadius: '2px',
+                                      outline: 'none',
+                                      appearance: 'none',
+                                      WebkitAppearance: 'none',
+                                      top: '50%',
+                                      transform: 'translateY(-50%)',
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            );
+                          })}
                         </div>
-                        {(['elasticity', 'borderRadius'] as const).map(key => {
-                          const value = settings[key];
-                          const max = key === 'borderRadius' ? 100 : 1;
-                          const step = key === 'elasticity' ? 0.01 : 1;
-                          const label = key
-                            .replace(/([A-Z])/g, ' $1')
-                            .replace(/^./, s => s.toUpperCase());
-                          return (
-                            <div key={key} className="u-mb-4">
+
+                        {/* Animation System Controls */}
+                        <div className="u-mb-4 u-animation-fade-in">
+                          <div className="u-flex u-items-center u-gap-2 u-mb-3">
+                            <div
+                              style={{
+                                width: '3px',
+                                height: '14px',
+                                background: 'linear-gradient(180deg, #f472b6 0%, #a78bfa 100%)',
+                                borderRadius: '2px',
+                                flexShrink: 0,
+                              }}
+                            />
+                            <span
+                              className="u-text-xs u-font-bold u-opacity-60"
+                              style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
+                            >
+                              Animation System
+                            </span>
+                          </div>
+
+                          {/* Time Animation Toggle */}
+                          <div className="u-mb-3">
+                            <button
+                              onClick={() => setSettings(prev => ({ ...prev, withTimeAnimation: !prev.withTimeAnimation }))}
+                              className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start u-w-100"
+                              style={{
+                                background: settings.withTimeAnimation
+                                  ? 'rgba(244,114,182,0.15)'
+                                  : 'rgba(255,255,255,0.04)',
+                                border: settings.withTimeAnimation
+                                  ? '1px solid rgba(244,114,182,0.45)'
+                                  : '1px solid rgba(255,255,255,0.1)',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  width: '10px',
+                                  height: '10px',
+                                  borderRadius: '50%',
+                                  background: settings.withTimeAnimation ? '#f472b6' : 'rgba(255,255,255,0.2)',
+                                  flexShrink: 0,
+                                  boxShadow: settings.withTimeAnimation ? '0 0 8px rgba(244,114,182,0.6)' : 'none',
+                                }}
+                              />
+                              <span
+                                className="u-text-xs u-font-medium"
+                                style={{ 
+                                  color: settings.withTimeAnimation ? '#f472b6' : 'rgba(255,255,255,0.6)',
+                                  flex: 1 
+                                }}
+                              >
+                                Time Animation
+                              </span>
+                            </button>
+                          </div>
+
+                          {/* Animation Speed */}
+                          {settings.withTimeAnimation && (
+                            <div className="u-mb-4">
                               <div className="u-flex u-justify-between u-items-baseline u-mb-1">
-                                <label className="u-fs-xs u-font-medium u-opacity-80">
-                                  {label}
+                                <label className="u-text-xs u-font-medium u-opacity-80">
+                                  Animation Speed
                                 </label>
                                 <span
-                                  className="u-fs-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                  className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
                                   style={{
-                                    background: 'rgba(167,139,250,0.12)',
-                                    color: '#a78bfa',
+                                    background: 'rgba(244,114,182,0.12)',
+                                    color: '#f472b6',
                                     fontVariantNumeric: 'tabular-nums',
                                     minWidth: '40px',
                                     textAlign: 'center',
                                   }}
                                 >
-                                  {(value as number).toFixed(key === 'elasticity' ? 2 : 0)}
+                                  {settings.animationSpeed.toFixed(1)}x
                                 </span>
                               </div>
                               <div className="u-relative" style={{ height: '20px' }}>
                                 <input
                                   type="range"
                                   min={0}
-                                  max={max}
-                                  step={step}
-                                  value={value as number}
+                                  max={3}
+                                  step={0.1}
+                                  value={settings.animationSpeed}
                                   onChange={e =>
                                     setSettings(prev => ({
                                       ...prev,
-                                      [key]: parseFloat(e.target.value),
+                                      animationSpeed: parseFloat(e.target.value),
                                     }))
                                   }
                                   className="premium-slider u-absolute u-w-100 u-m-0"
                                   style={{
                                     height: '2px',
-                                    background: `linear-gradient(to right, #a78bfa ${((value as number) / max) * 100}%, rgba(255,255,255,0.15) ${((value as number) / max) * 100}%)`,
+                                    background: `linear-gradient(to right, #f472b6 ${((settings.animationSpeed / 3) * 100)}%, rgba(255,255,255,0.15) ${((settings.animationSpeed / 3) * 100)}%)`,
                                     borderRadius: '2px',
                                     outline: 'none',
                                     appearance: 'none',
@@ -1041,11 +1239,357 @@ export const Playground: Story = {
                                 />
                               </div>
                             </div>
-                          );
-                        })}
+                          )}
+
+                          {/* Multi-Layer Distortion Toggle */}
+                          <div className="u-mb-3">
+                            <button
+                              onClick={() => setSettings(prev => ({ ...prev, withMultiLayerDistortion: !prev.withMultiLayerDistortion }))}
+                              className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start u-w-100"
+                              style={{
+                                background: settings.withMultiLayerDistortion
+                                  ? 'rgba(167,139,250,0.15)'
+                                  : 'rgba(255,255,255,0.04)',
+                                border: settings.withMultiLayerDistortion
+                                  ? '1px solid rgba(167,139,250,0.45)'
+                                  : '1px solid rgba(255,255,255,0.1)',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  width: '10px',
+                                  height: '10px',
+                                  borderRadius: '50%',
+                                  background: settings.withMultiLayerDistortion ? '#a78bfa' : 'rgba(255,255,255,0.2)',
+                                  flexShrink: 0,
+                                  boxShadow: settings.withMultiLayerDistortion ? '0 0 8px rgba(167,139,250,0.6)' : 'none',
+                                }}
+                              />
+                              <span
+                                className="u-text-xs u-font-medium"
+                                style={{ 
+                                  color: settings.withMultiLayerDistortion ? '#a78bfa' : 'rgba(255,255,255,0.6)',
+                                  flex: 1 
+                                }}
+                              >
+                                Multi-Layer Distortion
+                              </span>
+                            </button>
+                          </div>
+
+                          {/* FBM Parameters */}
+                          {settings.withMultiLayerDistortion && (
+                            <>
+                              {/* Octaves */}
+                              <div className="u-mb-3">
+                                <div className="u-flex u-justify-between u-items-baseline u-mb-1">
+                                  <label className="u-text-xs u-font-medium u-opacity-80">
+                                    Octaves
+                                  </label>
+                                  <span
+                                    className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                    style={{
+                                      background: 'rgba(167,139,250,0.12)',
+                                      color: '#a78bfa',
+                                      fontVariantNumeric: 'tabular-nums',
+                                      minWidth: '40px',
+                                      textAlign: 'center',
+                                    }}
+                                  >
+                                    {settings.distortionOctaves}
+                                  </span>
+                                </div>
+                                <div className="u-relative" style={{ height: '20px' }}>
+                                  <input
+                                    type="range"
+                                    min={1}
+                                    max={8}
+                                    step={1}
+                                    value={settings.distortionOctaves}
+                                    onChange={e =>
+                                      setSettings(prev => ({
+                                        ...prev,
+                                        distortionOctaves: parseInt(e.target.value),
+                                      }))
+                                    }
+                                    className="premium-slider u-absolute u-w-100 u-m-0"
+                                    style={{
+                                      height: '2px',
+                                      background: `linear-gradient(to right, #a78bfa ${(settings.distortionOctaves / 8) * 100}%, rgba(255,255,255,0.15) ${(settings.distortionOctaves / 8) * 100}%)`,
+                                      borderRadius: '2px',
+                                      outline: 'none',
+                                      appearance: 'none',
+                                      WebkitAppearance: 'none',
+                                      top: '50%',
+                                      transform: 'translateY(-50%)',
+                                    }}
+                                  />
+                                </div>
+                              </div>
+
+                              {/* Lacunarity */}
+                              <div className="u-mb-3">
+                                <div className="u-flex u-justify-between u-items-baseline u-mb-1">
+                                  <label className="u-text-xs u-font-medium u-opacity-80">
+                                    Lacunarity
+                                  </label>
+                                  <span
+                                    className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                    style={{
+                                      background: 'rgba(167,139,250,0.12)',
+                                      color: '#a78bfa',
+                                      fontVariantNumeric: 'tabular-nums',
+                                      minWidth: '40px',
+                                      textAlign: 'center',
+                                    }}
+                                  >
+                                    {settings.distortionLacunarity.toFixed(1)}
+                                  </span>
+                                </div>
+                                <div className="u-relative" style={{ height: '20px' }}>
+                                  <input
+                                    type="range"
+                                    min={1}
+                                    max={4}
+                                    step={0.1}
+                                    value={settings.distortionLacunarity}
+                                    onChange={e =>
+                                      setSettings(prev => ({
+                                        ...prev,
+                                        distortionLacunarity: parseFloat(e.target.value),
+                                      }))
+                                    }
+                                    className="premium-slider u-absolute u-w-100 u-m-0"
+                                    style={{
+                                      height: '2px',
+                                      background: `linear-gradient(to right, #a78bfa ${((settings.distortionLacunarity - 1) / 3) * 100}%, rgba(255,255,255,0.15) ${((settings.distortionLacunarity - 1) / 3) * 100}%)`,
+                                      borderRadius: '2px',
+                                      outline: 'none',
+                                      appearance: 'none',
+                                      WebkitAppearance: 'none',
+                                      top: '50%',
+                                      transform: 'translateY(-50%)',
+                                    }}
+                                  />
+                                </div>
+                              </div>
+
+                              {/* Gain */}
+                              <div className="u-mb-3">
+                                <div className="u-flex u-justify-between u-items-baseline u-mb-1">
+                                  <label className="u-text-xs u-font-medium u-opacity-80">
+                                    Gain
+                                  </label>
+                                  <span
+                                    className="u-text-xs u-font-bold u-px-2 u-py-1 u-rounded"
+                                    style={{
+                                      background: 'rgba(167,139,250,0.12)',
+                                      color: '#a78bfa',
+                                      fontVariantNumeric: 'tabular-nums',
+                                      minWidth: '40px',
+                                      textAlign: 'center',
+                                    }}
+                                  >
+                                    {settings.distortionGain.toFixed(2)}
+                                  </span>
+                                </div>
+                                <div className="u-relative" style={{ height: '20px' }}>
+                                  <input
+                                    type="range"
+                                    min={0.1}
+                                    max={1}
+                                    step={0.01}
+                                    value={settings.distortionGain}
+                                    onChange={e =>
+                                      setSettings(prev => ({
+                                        ...prev,
+                                        distortionGain: parseFloat(e.target.value),
+                                      }))
+                                    }
+                                    className="premium-slider u-absolute u-w-100 u-m-0"
+                                    style={{
+                                      height: '2px',
+                                      background: `linear-gradient(to right, #a78bfa ${((settings.distortionGain - 0.1) / 0.9) * 100}%, rgba(255,255,255,0.15) ${((settings.distortionGain - 0.1) / 0.9) * 100}%)`,
+                                      borderRadius: '2px',
+                                      outline: 'none',
+                                      appearance: 'none',
+                                      WebkitAppearance: 'none',
+                                      top: '50%',
+                                      transform: 'translateY(-50%)',
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            </>
+                          )}
+                        </div>
+                      </>
+                    )}
+                    
+                    {/* === CONTROLS: RESPONSIVE & PERFORMANCE === */}
+                    {controlTab === 'responsive' && (
+                      <div className="u-mb-4 u-animation-fade-in">
+                        <div className="u-flex u-items-center u-gap-2 u-mb-3">
+                          <div
+                            style={{
+                              width: '3px',
+                              height: '14px',
+                              background: 'linear-gradient(180deg, #10b981 0%, #3b82f6 100%)',
+                              borderRadius: '2px',
+                              flexShrink: 0,
+                            }}
+                          />
+                          <span
+                            className="u-text-xs u-font-bold u-opacity-60"
+                            style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
+                          >
+                            Responsive & Performance
+                          </span>
+                        </div>
+                    
+                        {/* Device Preset Selector */}
+                        <div className="u-mb-4">
+                          <label className="u-block u-mb-2 u-text-white u-font-semibold u-text-xs">
+                            Device Preset
+                          </label>
+                          <div
+                            className="u-grid u-gap-2"
+                            style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
+                          >
+                            {(['performance', 'balanced', 'quality'] as const).map(preset => (
+                              <button
+                                key={preset}
+                                onClick={() => setSettings(prev => ({ ...prev, devicePreset: preset }))}
+                                className="u-py-2 u-rounded u-text-center u-text-xs u-font-bold"
+                                style={{
+                                  background:
+                                    settings.devicePreset === preset
+                                      ? 'linear-gradient(135deg, rgba(16,185,129,0.3) 0%, rgba(59,130,246,0.2) 100%)'
+                                      : 'rgba(255,255,255,0.05)',
+                                  border:
+                                    settings.devicePreset === preset
+                                      ? '1px solid rgba(16,185,129,0.5)'
+                                      : '1px solid rgba(255,255,255,0.1)',
+                                  color: settings.devicePreset === preset ? '#10b981' : 'rgba(255,255,255,0.55)',
+                                  cursor: 'pointer',
+                                  transition: 'all 0.2s',
+                                  outline: 'none',
+                                  textTransform: 'capitalize',
+                                  boxShadow:
+                                    settings.devicePreset === preset ? '0 2px 12px rgba(16,185,129,0.15)' : 'none',
+                                }}
+                              >
+                                {preset}
+                              </button>
+                            ))}
+                          </div>
+                          <p className="u-mt-2 u-text-xs u-opacity-60">
+                            {settings.devicePreset === 'performance' && '⚡ Optimized for low-end devices with reduced quality'}
+                            {settings.devicePreset === 'balanced' && '⚖️ Balanced quality and performance (recommended)'}
+                            {settings.devicePreset === 'quality' && '💎 Maximum visual quality for high-end devices'}
+                          </p>
+                        </div>
+                    
+                        {/* Disable Responsive Breakpoints Toggle */}
+                        <div className="u-mb-4">
+                          <button
+                            onClick={() => setSettings(prev => ({ ...prev, disableResponsiveBreakpoints: !prev.disableResponsiveBreakpoints }))}
+                            className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start u-w-100"
+                            style={{
+                              background: settings.disableResponsiveBreakpoints
+                                ? 'rgba(239,68,68,0.15)'
+                                : 'rgba(255,255,255,0.04)',
+                              border: settings.disableResponsiveBreakpoints
+                                ? '1px solid rgba(239,68,68,0.45)'
+                                : '1px solid rgba(255,255,255,0.1)',
+                              cursor: 'pointer',
+                              transition: 'all 0.2s',
+                            }}
+                          >
+                            <div
+                              style={{
+                                width: '10px',
+                                height: '10px',
+                                borderRadius: '50%',
+                                background: settings.disableResponsiveBreakpoints ? '#ef4444' : 'rgba(255,255,255,0.2)',
+                                flexShrink: 0,
+                                boxShadow: settings.disableResponsiveBreakpoints ? '0 0 8px rgba(239,68,68,0.6)' : 'none',
+                              }}
+                            />
+                            <span
+                              className="u-text-xs u-font-medium"
+                              style={{ 
+                                color: settings.disableResponsiveBreakpoints ? '#ef4444' : 'rgba(255,255,255,0.6)',
+                                flex: 1 
+                              }}
+                            >
+                              Disable Responsive Breakpoints
+                            </span>
+                          </button>
+                          <p className="u-mt-1 u-text-xs u-opacity-50">
+                            When enabled, prevents automatic parameter adjustment based on viewport size
+                          </p>
+                        </div>
+                    
+                        {/* Debug Options */}
+                        <div className="u-mb-3">
+                          <label className="u-block u-mb-2 u-text-white u-font-semibold u-text-xs">
+                            🔍 Debug Options
+                          </label>
+                          <div className="u-grid u-gap-3" style={{ gridTemplateColumns: '1fr 1fr' }}>
+                            {(
+                              [
+                                'debugPerformance',
+                                'debugOverLight',
+                              ] as const
+                            ).map(key => {
+                              const isOn = settings[key] as boolean;
+                              const label = key
+                                .replace(/([A-Z])/g, ' $1')
+                                .replace(/^./, s => s.toUpperCase());
+                              return (
+                                <button
+                                  key={key}
+                                  onClick={() => setSettings(prev => ({ ...prev, [key]: !isOn }))}
+                                  className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start"
+                                  style={{
+                                    background: isOn
+                                      ? 'rgba(59,130,246,0.15)'
+                                      : 'rgba(255,255,255,0.04)',
+                                    border: isOn
+                                      ? '1px solid rgba(59,130,246,0.45)'
+                                      : '1px solid rgba(255,255,255,0.1)',
+                                    cursor: 'pointer',
+                                    transition: 'all 0.2s',
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      width: '10px',
+                                      height: '10px',
+                                      borderRadius: '50%',
+                                      background: isOn ? '#3b82f6' : 'rgba(255,255,255,0.2)',
+                                      flexShrink: 0,
+                                      boxShadow: isOn ? '0 0 8px rgba(59,130,246,0.6)' : 'none',
+                                      transition: 'all 0.2s',
+                                    }}
+                                  />
+                                  <span
+                                    className="u-text-xs u-font-medium"
+                                    style={{ color: isOn ? '#3b82f6' : 'rgba(255,255,255,0.6)' }}
+                                  >
+                                    {label}
+                                  </span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
                       </div>
                     )}
-
+                    
                     {/* === CONTROLS: ACCESSIBILITY FLAGS === */}
                     {controlTab === 'flags' && (
                       <div className="u-mb-4 u-animation-fade-in">
@@ -1060,7 +1604,7 @@ export const Playground: Story = {
                             }}
                           />
                           <span
-                            className="u-fs-xs u-font-bold u-opacity-60"
+                            className="u-text-xs u-font-bold u-opacity-60"
                             style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                           >
                             Flags
@@ -1110,7 +1654,7 @@ export const Playground: Story = {
                                   }}
                                 />
                                 <span
-                                  className="u-fs-xs u-font-medium"
+                                  className="u-text-xs u-font-medium"
                                   style={{ color: isOn ? '#7AFFD7' : 'rgba(255,255,255,0.6)' }}
                                 >
                                   {label}
@@ -1136,7 +1680,7 @@ export const Playground: Story = {
                         }}
                       />
                       <span
-                        className="u-fs-xs u-font-bold u-opacity-60"
+                        className="u-text-xs u-font-bold u-opacity-60"
                         style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                       >
                         Glass Mode
@@ -1150,7 +1694,7 @@ export const Playground: Story = {
                         <button
                           key={mode}
                           onClick={() => setSelectedMode(mode)}
-                          className="u-py-2 u-rounded u-text-center u-fs-xs u-font-bold"
+                          className="u-py-2 u-rounded u-text-center u-text-xs u-font-bold"
                           style={{
                             background:
                               selectedMode === mode
@@ -1189,7 +1733,7 @@ export const Playground: Story = {
                           }}
                         />
                         <span
-                          className="u-fs-xs u-font-bold u-opacity-60"
+                          className="u-text-xs u-font-bold u-opacity-60"
                           style={{ letterSpacing: '1px', textTransform: 'uppercase' }}
                         >
                           Shader Variant
@@ -1200,7 +1744,7 @@ export const Playground: Story = {
                           <button
                             key={opt.value}
                             onClick={() => setSelectedShader(opt.value as any)}
-                            className="u-py-2 u-px-3 u-rounded u-text-start u-fs-xs u-font-medium"
+                            className="u-py-2 u-px-3 u-rounded u-text-start u-text-xs u-font-medium"
                             style={{
                               background:
                                 selectedShader === opt.value
@@ -1228,7 +1772,7 @@ export const Playground: Story = {
                   <div className="u-mb-4">
                     {/* Header row: label + nav controls */}
                     <div className="u-flex u-items-center u-justify-between u-mb-2">
-                      <label className="u-block u-text-white u-font-semibold u-fs-sm">
+                      <label className="u-block u-text-white u-font-semibold u-text-sm">
                         🌄 Background
                       </label>
                       <div className="u-flex u-items-center u-gap-2">
@@ -1264,7 +1808,7 @@ export const Playground: Story = {
                           ‹
                         </button>
                         <span
-                          className="u-fs-xs u-opacity-60"
+                          className="u-text-xs u-opacity-60"
                           style={{
                             minWidth: '36px',
                             textAlign: 'center',
@@ -1454,17 +1998,17 @@ export const Playground: Story = {
                           flexShrink: 0,
                         }}
                       />
-                      <span className="u-fs-xs u-opacity-70" style={{ fontWeight: 600 }}>
+                      <span className="u-text-xs u-opacity-70" style={{ fontWeight: 600 }}>
                         {backgrounds[backgroundIndex]?.label}
                       </span>
                       <span
-                        className="u-fs-xs u-opacity-40"
+                        className="u-text-xs u-opacity-40"
                         style={{ textTransform: 'capitalize', marginLeft: 'auto' }}
                       >
                         {backgrounds[backgroundIndex]?.tag}
                       </span>
                     </div>
-                    <div className="u-mt-1 u-fs-xs u-opacity-35" style={{ letterSpacing: '0.3px' }}>
+                    <div className="u-mt-1 u-text-xs u-opacity-35" style={{ letterSpacing: '0.3px' }}>
                       Use ← → arrow keys to navigate
                     </div>
                   </div>
@@ -1516,6 +2060,17 @@ export const Playground: Story = {
                           withoutEffects: false,
                           withLiquidBlur: false,
                           withBorder: true,
+                          withTimeAnimation: true,
+                          animationSpeed: 1.0,
+                          withMultiLayerDistortion: false,
+                          distortionOctaves: 3,
+                          distortionLacunarity: 2.0,
+                          distortionGain: 0.5,
+                          distortionQuality: 'medium',
+                          devicePreset: 'balanced',
+                          disableResponsiveBreakpoints: false,
+                          debugPerformance: false,
+                          debugOverLight: false,
                         });
                         setSelectedMode('standard');
                         setSelectedShader('liquidGlass');
@@ -1543,7 +2098,7 @@ export const Playground: Story = {
                         <div className="u-flex u-justify-between u-items-center u-mb-6">
                           <div>
                             <h3
-                              className="u-m-0 u-font-bold u-fs-xl"
+                              className="u-m-0 u-font-bold u-text-xl"
                               style={{
                                 background:
                                   'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
@@ -1554,7 +2109,7 @@ export const Playground: Story = {
                             >
                               💻 Generated Code
                             </h3>
-                            <p className="u-m-0 u-fs-sm u-text-white u-opacity-70 u-mt-1">
+                            <p className="u-m-0 u-text-sm u-text-white u-opacity-70 u-mt-1">
                               Copy this code to use in your project
                             </p>
                           </div>
@@ -1573,7 +2128,7 @@ export const Playground: Story = {
                           </Button>
                         </div>
                         <pre
-                          className="custom-scrollbar u-rounded u-fs-sm"
+                          className="custom-scrollbar u-rounded u-text-sm"
                           style={{
                             overflowX: 'auto',
                             overflowY: 'auto',
@@ -1608,11 +2163,21 @@ export const Playground: Story = {
                     withoutEffects={settings.withoutEffects}
                     withLiquidBlur={settings.withLiquidBlur}
                     withBorder={settings.withBorder}
+                    withTimeAnimation={settings.withTimeAnimation}
+                    animationSpeed={settings.animationSpeed}
+                    withMultiLayerDistortion={settings.withMultiLayerDistortion}
+                    distortionOctaves={settings.distortionOctaves}
+                    distortionLacunarity={settings.distortionLacunarity}
+                    distortionGain={settings.distortionGain}
+                    distortionQuality={settings.distortionQuality}
+                    devicePreset={settings.devicePreset}
+                    disableResponsiveBreakpoints={settings.disableResponsiveBreakpoints}
+                    debugPerformance={settings.debugPerformance}
                   >
                     <div className="u-h-100 u-w-100 custom-scrollbar" style={{ overflowY: 'auto' }}>
                       <div className="u-p-4 u-p-lg-5 u-text-center">
                         <div
-                          className="u-inline-flex u-items-center u-gap-2 u-px-3 u-py-1 u-rounded-pill u-mb-4 u-fs-xs u-font-bold"
+                          className="u-inline-flex u-items-center u-gap-2 u-px-3 u-py-1 u-rounded-pill u-mb-4 u-text-xs u-font-bold"
                           style={{
                             background:
                               'linear-gradient(135deg, rgba(122, 255, 215, 0.2) 0%, rgba(102, 126, 234, 0.2) 100%)',
@@ -1623,7 +2188,7 @@ export const Playground: Story = {
                             backdropFilter: 'blur(8px)',
                           }}
                         >
-                          <span className="u-fs-base">✨</span>
+                          <span className="u-text-base">✨</span>
                           <span>LIVE PREVIEW</span>
                         </div>
 
@@ -1713,7 +2278,7 @@ export const Playground: Story = {
                             }}
                           >
                             <div
-                              className="u-mb-3 u-font-bold u-fs-sm"
+                              className="u-mb-3 u-font-bold u-text-sm"
                               style={{ color: '#7AFFD7', letterSpacing: '0.5px' }}
                             >
                               📊 Current Configuration Stack
@@ -1723,50 +2288,50 @@ export const Playground: Story = {
                               style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}
                             >
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">Mode</span>
+                                <span className="u-text-xs u-opacity-60 u-font-medium">Mode</span>
                                 <span
-                                  className="u-fs-sm u-font-bold u-text-white"
+                                  className="u-text-sm u-font-bold u-text-white"
                                   style={{ textTransform: 'capitalize' }}
                                 >
                                   {selectedMode}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">Shader</span>
+                                <span className="u-text-xs u-opacity-60 u-font-medium">Shader</span>
                                 <span
-                                  className="u-fs-sm u-font-bold u-text-white"
+                                  className="u-text-sm u-font-bold u-text-white"
                                   style={{ textTransform: 'capitalize' }}
                                 >
                                   {selectedShader}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">
                                   Displacement
                                 </span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.displacementScale}px
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">
                                   Aberration
                                 </span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.aberrationIntensity.toFixed(1)}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">Blur</span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">Blur</span>
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.blurAmount.toFixed(2)}
                                 </span>
                               </div>
                               <div className="u-flex u-flex-column u-gap-1">
-                                <span className="u-fs-xs u-opacity-60 u-font-medium">
+                                <span className="u-text-xs u-opacity-60 u-font-medium">
                                   Elasticity
                                 </span>
-                                <span className="u-fs-sm u-font-bold u-text-white">
+                                <span className="u-text-sm u-font-bold u-text-white">
                                   {settings.elasticity.toFixed(2)}
                                 </span>
                               </div>
@@ -1783,14 +2348,14 @@ export const Playground: Story = {
                             }}
                           >
                             <div
-                              className="u-mb-3 u-font-bold u-fs-sm"
+                              className="u-mb-3 u-font-bold u-text-sm"
                               style={{ color: '#7AFFD7', letterSpacing: '0.5px' }}
                             >
                               🎨 Visual Characteristics
                             </div>
                             <div className="u-flex u-flex-wrap u-gap-2">
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.withLiquidBlur
                                     ? 'rgba(122, 255, 215, 0.15)'
@@ -1807,7 +2372,7 @@ export const Playground: Story = {
                                 {settings.withLiquidBlur ? '✓' : '○'} Liquid Blur
                               </div>
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.withBorder
                                     ? 'rgba(122, 255, 215, 0.15)'
@@ -1822,7 +2387,7 @@ export const Playground: Story = {
                                 {settings.withBorder ? '✓' : '○'} Border Effect
                               </div>
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.reducedMotion
                                     ? 'rgba(239, 68, 68, 0.15)'
@@ -1839,7 +2404,7 @@ export const Playground: Story = {
                                 {settings.reducedMotion ? '✓' : '○'} Reduced Motion
                               </div>
                               <div
-                                className="u-px-3 u-py-1 u-rounded-pill u-fs-xs u-font-bold"
+                                className="u-px-3 u-py-1 u-rounded-pill u-text-xs u-font-bold"
                                 style={{
                                   background: settings.highContrast
                                     ? 'rgba(245, 158, 11, 0.15)'
@@ -1868,7 +2433,7 @@ export const Playground: Story = {
                             }}
                           >
                             <div
-                              className="u-mb-3 u-font-bold u-fs-sm"
+                              className="u-mb-3 u-font-bold u-text-sm"
                               style={{ color: '#7AFFD7', letterSpacing: '0.5px' }}
                             >
                               📈 Quick Stats
@@ -1877,23 +2442,23 @@ export const Playground: Story = {
                               className="u-grid u-gap-3"
                               style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}
                             >
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Saturation:</span>
                                 <span className="u-font-bold u-ml-2">{settings.saturation}%</span>
                               </div>
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Radius:</span>
                                 <span className="u-font-bold u-ml-2">
                                   {settings.borderRadius}px
                                 </span>
                               </div>
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Bg:</span>
                                 <span className="u-font-bold u-ml-2">
                                   {backgroundIndex + 1}/{backgrounds.length}
                                 </span>
                               </div>
-                              <div className="u-flex u-items-center u-fs-sm">
+                              <div className="u-flex u-items-center u-text-sm">
                                 <span className="u-opacity-60 u-font-medium">Effects:</span>
                                 <span className="u-font-bold u-ml-2">
                                   {settings.withoutEffects ? 'Off' : 'On'}