@shohojdhara/atomix 0.4.9 → 0.5.1

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

@@ -253,7 +253,7 @@ const BackgroundWrapper = ({
         <div
           key={bg.url}
           style={{
-            position: 'absolute',
+            position: 'fixed',
             inset: 0,
             backgroundImage: `url(${bg.url})`,
             backgroundSize: 'cover',
@@ -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,9 @@ 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 +383,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 +414,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 +445,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 +476,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 +516,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 */}
@@ -851,7 +941,7 @@ 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)}
@@ -968,69 +1058,190 @@ 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-text-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-text-xs u-font-medium u-opacity-80">
-                                  {label}
+                                  Animation Speed
                                 </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',
+                                    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,8 +1252,385 @@ 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>
                     )}
 
@@ -1464,7 +2052,10 @@ export const Playground: Story = {
                         {backgrounds[backgroundIndex]?.tag}
                       </span>
                     </div>
-                    <div className="u-mt-1 u-text-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 +2107,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');
@@ -1608,6 +2210,16 @@ 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">