@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Accordion/Accordion.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Accordion } from './Accordion';
 import { ACCORDION } from '../../lib/constants/components';
+import type { AtomixGlassProps } from '../../lib/types/components';
 
 // Extract class names without the leading dots
 const ACCORDION_CLASS = ACCORDION.SELECTORS.ACCORDION.replace('.', '');
@@ -281,13 +282,16 @@ export const Glass: Story = {
     children: <p>This accordion has a glass morphism effect applied.</p>,
     glass: true,
   },
-  render: (args) => (
+  render: args => (
     <div
       style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background:
+          'url(https://images.unsplash.com/photo-1759915995309-404c743bfbf9?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
         padding: '2rem',
         borderRadius: '12px',
-        minHeight: '300px',
+        height: '97vh',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -301,7 +305,8 @@ export const Glass: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
+        story:
+          'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
       },
     },
   },
@@ -313,27 +318,40 @@ export const GlassCustom: Story = {
     title: 'Custom Glass Accordion',
     children: <p>This accordion has custom glass morphism settings.</p>,
     glass: {
-      displacementScale: 80,
-      blurAmount: 2,
-      saturation: 200,
-      aberrationIntensity: 0.8,
-      cornerRadius: 12,
-    },
+      displacementScale: 180,
+      blurAmount: 3,
+      saturation: 60,
+      mode: 'polar',
+    } as AtomixGlassProps as any,
   },
-  render: (args) => (
+  render: args => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1660478481785-cb609142d9ab?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
-        backgroundSize: 'cover',
+        background:
+          'url(https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: '120%',
         backgroundPosition: 'center',
         padding: '2rem',
         borderRadius: '12px',
-        minHeight: '400px',
+        minHeight: '97vh',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        animation: 'gradient 15s ease infinite',
       }}
     >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            20% { background-position: 70% 50%; }
+            40% { background-position: 0% 50%; }
+            50% { background-position: 50% 0%; }
+            75% { background-position: 50% 50%; }
+            100% { background-position: 50% 0%; }
+          }
+        `}
+      </style>
       <div style={{ width: '100%', maxWidth: '500px' }}>
         <Accordion {...args} />
       </div>
@@ -342,7 +360,8 @@ export const GlassCustom: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
+        story:
+          'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
       },
     },
   },
@@ -353,16 +372,24 @@ export const GlassGroup: Story = {
   args: {
     title: 'Glass Accordion Group',
     children: <p>Group example with glass effect - see render function</p>,
+    glass: {
+      displacementScale: 180,
+      blurAmount: 1,
+      saturation: 60,
+      mode: 'shader',
+      ShaderVariant: 'premiumGlass',
+    } as any,
   },
   render: () => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1587289087865-396fc357ef9e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
-        backgroundSize: '200% 200%',
+        background:
+          'url(https://images.unsplash.com/photo-1623237353316-417116e040a5?q=80&w=3307&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: '150%',
         animation: 'gradient 15s ease infinite',
         padding: '2rem',
         borderRadius: '12px',
-        minHeight: '500px',
+        minHeight: '97vh',
       }}
     >
       <style>
@@ -374,10 +401,20 @@ export const GlassGroup: Story = {
           }
         `}
       </style>
-      <h2 style={{ color: 'white', textAlign: 'center', marginBottom: '2rem', textShadow: '0 2px 4px rgba(0,0,0,0.3)' }}>
+      <h2
+        style={{
+          color: 'white',
+          textAlign: 'center',
+          marginBottom: '2rem',
+          textShadow: '0 2px 4px rgba(0,0,0,0.3)',
+        }}
+      >
         Glass Accordion Group
       </h2>
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '100%', maxWidth: '600px', margin: '0 auto' }}>
+      <div
+        className="u-d-flex u-flex-column u-gap-3"
+        style={{ width: '100%', maxWidth: '600px', margin: '0 auto' }}
+      >
         <Accordion title="First Glass Accordion" defaultOpen={true} glass>
           <p>Content of the first glass accordion with beautiful glass morphism effect.</p>
         </Accordion>
@@ -401,8 +438,612 @@ export const GlassGroup: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates multiple Accordions with glass morphism effects against an animated gradient background.',
+        story:
+          'This story demonstrates multiple Accordions with glass morphism effects against an animated gradient background.',
       },
     },
   },
 };
+
+// Glass Mode Variants - Standard
+export const GlassModeStandard: Story = {
+  args: {
+    title: 'Standard Glass Mode Accordion',
+    children: (
+      <div>
+        <p>
+          This accordion uses the standard glass mode with classic blur and displacement effects.
+        </p>
+        <p>The standard mode provides a refined glass appearance perfect for elegant interfaces.</p>
+      </div>
+    ),
+    glass: true,
+  },
+  render: args => (
+    <div
+      style={{
+        background:
+          'url(https://images.unsplash.com/photo-1689960159745-fbc6434d4434?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1335)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '95vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '2rem',
+      }}
+    >
+      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Standard Glass Mode</h3>
+        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>
+          Classic glass morphism with blur and displacement
+        </p>
+      </div>
+      <div style={{ width: '100%', maxWidth: '600px' }}>
+        <Accordion {...args} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass Mode Variants - Polar
+export const GlassModePolar: Story = {
+  args: {
+    title: 'Polar Glass Mode Accordion',
+    children: (
+      <div>
+        <p>This accordion uses the polar glass mode with radial distortion effects.</p>
+        <p>The polar mode creates unique distortion patterns emanating from the center point.</p>
+      </div>
+    ),
+    glass: {
+      mode: 'polar',
+      displacementScale: 80,
+      blurAmount: 1.5,
+      saturation: 180,
+      aberrationIntensity: 3,
+    } as any,
+  },
+  render: args => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1557683316-973673baf926?w=1920)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '95vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '2rem',
+      }}
+    >
+      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Polar Glass Mode</h3>
+        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>Radial distortion effect from center</p>
+      </div>
+      <div style={{ width: '100%', maxWidth: '600px' }}>
+        <Accordion {...args} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass Mode Variants - Prominent
+export const GlassModeProminent: Story = {
+  args: {
+    title: 'Prominent Glass Mode Accordion',
+    children: (
+      <div>
+        <p>This accordion uses the prominent glass mode with enhanced distortion effects.</p>
+        <p>The prominent mode delivers maximum depth and visual impact for striking designs.</p>
+      </div>
+    ),
+    glass: {
+      mode: 'prominent',
+      displacementScale: 100,
+      blurAmount: 2.5,
+      saturation: 200,
+      aberrationIntensity: 4,
+    } as any,
+  },
+  render: args => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1920)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '95vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '2rem',
+      }}
+    >
+      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Prominent Glass Mode</h3>
+        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>Enhanced distortion with maximum depth</p>
+      </div>
+      <div style={{ width: '100%', maxWidth: '600px' }}>
+        <Accordion {...args} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass Mode Variants - Shader
+export const GlassModeShader: Story = {
+  args: {
+    title: 'Shader Glass Mode Accordion',
+    children: (
+      <div>
+        <p>This accordion uses the shader glass mode with GPU-accelerated liquid glass effects.</p>
+        <p>The shader mode provides smooth, performant animations with liquid glass dynamics.</p>
+      </div>
+    ),
+    glass: {
+      mode: 'shader',
+      shaderVariant: 'liquidGlass',
+      displacementScale: 70,
+      blurAmount: 1.8,
+      saturation: 170,
+    } as any,
+  },
+  render: args => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1920)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '95vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '2rem',
+      }}
+    >
+      <div style={{ textAlign: 'center', color: 'white', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>Shader Glass Mode</h3>
+        <p style={{ fontSize: '0.875rem', opacity: 0.9 }}>GPU-accelerated liquid glass effect</p>
+      </div>
+      <div style={{ width: '100%', maxWidth: '600px' }}>
+        <Accordion {...args} />
+      </div>
+    </div>
+  ),
+};
+
+// All Glass Modes Comparison
+export const AllGlassModesComparison: Story = {
+  args: {
+    title: 'Glass Modes Comparison',
+    children: <p>Comparison example</p>,
+  },
+  render: () => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '95vh',
+        overflow: 'auto',
+      }}
+    >
+      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+        <h2
+          style={{
+            textAlign: 'center',
+            color: 'white',
+            marginBottom: '3rem',
+            fontSize: '2rem',
+            textShadow: '0 2px 8px rgba(0,0,0,0.5)',
+          }}
+        >
+          Glass Mode Accordions Comparison
+        </h2>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+            gap: '2rem',
+          }}
+        >
+          {/* Standard Mode */}
+          <div>
+            <h3
+              style={{
+                color: 'white',
+                marginBottom: '1rem',
+                fontSize: '1.25rem',
+                textAlign: 'center',
+              }}
+            >
+              Standard Mode
+            </h3>
+            <Accordion title="Standard Glass" glass={true}>
+              <p>Classic blur and displacement effects for a refined glass appearance.</p>
+            </Accordion>
+          </div>
+
+          {/* Polar Mode */}
+          <div>
+            <h3
+              style={{
+                color: 'white',
+                marginBottom: '1rem',
+                fontSize: '1.25rem',
+                textAlign: 'center',
+              }}
+            >
+              Polar Mode
+            </h3>
+            <Accordion
+              title="Polar Glass"
+              glass={
+                {
+                  mode: 'polar',
+                  displacementScale: 80,
+                  blurAmount: 1.5,
+                  saturation: 180,
+                  aberrationIntensity: 3,
+                } as any
+              }
+            >
+              <p>Radial distortion effects emanating from the center point.</p>
+            </Accordion>
+          </div>
+
+          {/* Prominent Mode */}
+          <div>
+            <h3
+              style={{
+                color: 'white',
+                marginBottom: '1rem',
+                fontSize: '1.25rem',
+                textAlign: 'center',
+              }}
+            >
+              Prominent Mode
+            </h3>
+            <Accordion
+              title="Prominent Glass"
+              glass={
+                {
+                  mode: 'prominent',
+                  displacementScale: 100,
+                  blurAmount: 2.5,
+                  saturation: 200,
+                  aberrationIntensity: 4,
+                } as any
+              }
+            >
+              <p>Enhanced distortion with maximum depth and visual impact.</p>
+            </Accordion>
+          </div>
+
+          {/* Shader Mode */}
+          <div>
+            <h3
+              style={{
+                color: 'white',
+                marginBottom: '1rem',
+                fontSize: '1.25rem',
+                textAlign: 'center',
+              }}
+            >
+              Shader Mode
+            </h3>
+            <Accordion
+              title="Shader Glass"
+              glass={
+                {
+                  mode: 'shader',
+                  shaderVariant: 'liquidGlass',
+                  displacementScale: 70,
+                  blurAmount: 1.8,
+                  saturation: 170,
+                } as any
+              }
+            >
+              <p>GPU-accelerated liquid glass with smooth animations.</p>
+            </Accordion>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Glass Accordion Interactive Showcase
+export const GlassInteractiveShowcase: Story = {
+  args: {
+    title: 'Interactive Glass Accordion',
+    children: <p>Interactive showcase</p>,
+  },
+  render: () => {
+    const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+    return (
+      <div
+        style={{
+          background: 'url(https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '3rem',
+          borderRadius: '12px',
+          minHeight: '95vh',
+          overflow: 'auto',
+        }}
+      >
+        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+          <h2
+            style={{
+              textAlign: 'center',
+              color: 'white',
+              marginBottom: '3rem',
+              fontSize: '2rem',
+              textShadow: '0 2px 8px rgba(0,0,0,0.5)',
+            }}
+          >
+            Interactive Glass Accordion Showcase
+          </h2>
+
+          <div className="u-d-flex u-flex-column u-gap-3">
+            <Accordion
+              title="Features & Benefits"
+              isOpen={openIndex === 0}
+              onOpenChange={open => setOpenIndex(open ? 0 : null)}
+              glass={
+                {
+                  mode: 'standard',
+                  displacementScale: 60,
+                  blurAmount: 2,
+                } as any
+              }
+            >
+              <div>
+                <h4 style={{ marginBottom: '0.5rem' }}>Premium Glass Effects</h4>
+                <ul style={{ paddingLeft: '1.5rem' }}>
+                  <li>Hardware-accelerated rendering</li>
+                  <li>Smooth mouse-responsive animations</li>
+                  <li>Multiple distortion modes</li>
+                  <li>Customizable parameters</li>
+                </ul>
+              </div>
+            </Accordion>
+
+            <Accordion
+              title="Technical Specifications"
+              isOpen={openIndex === 1}
+              onOpenChange={open => setOpenIndex(open ? 1 : null)}
+              glass={
+                {
+                  mode: 'polar',
+                  displacementScale: 70,
+                  blurAmount: 1.8,
+                } as any
+              }
+            >
+              <div>
+                <h4 style={{ marginBottom: '0.5rem' }}>Performance & Compatibility</h4>
+                <p>Optimized for modern browsers with WebGL support.</p>
+                <ul style={{ paddingLeft: '1.5rem', marginTop: '0.5rem' }}>
+                  <li>60 FPS animations</li>
+                  <li>Responsive design</li>
+                  <li>Accessibility compliant</li>
+                  <li>Mobile-friendly</li>
+                </ul>
+              </div>
+            </Accordion>
+
+            <Accordion
+              title="Customization Options"
+              isOpen={openIndex === 2}
+              onOpenChange={open => setOpenIndex(open ? 2 : null)}
+              glass={
+                {
+                  mode: 'prominent',
+                  displacementScale: 80,
+                  blurAmount: 2.2,
+                } as any
+              }
+            >
+              <div>
+                <h4 style={{ marginBottom: '0.5rem' }}>Flexible Configuration</h4>
+                <p>Customize every aspect of the glass effect:</p>
+                <ul style={{ paddingLeft: '1.5rem', marginTop: '0.5rem' }}>
+                  <li>Blur amount and saturation</li>
+                  <li>Displacement scale</li>
+                  <li>Aberration intensity</li>
+                  <li>Corner radius</li>
+                  <li>Mode selection</li>
+                </ul>
+              </div>
+            </Accordion>
+
+            <Accordion
+              title="Integration Guide"
+              isOpen={openIndex === 3}
+              onOpenChange={open => setOpenIndex(open ? 3 : null)}
+              glass={
+                {
+                  mode: 'shader',
+                  shaderVariant: 'liquidGlass',
+                  displacementScale: 65,
+                } as any
+              }
+            >
+              <div>
+                <h4 style={{ marginBottom: '0.5rem' }}>Easy Implementation</h4>
+                <p>Simple to integrate with your existing components:</p>
+                <div
+                  style={{
+                    background: 'rgba(0,0,0,0.3)',
+                    padding: '1rem',
+                    borderRadius: '4px',
+                    marginTop: '0.5rem',
+                  }}
+                >
+                  <code style={{ color: '#fff', fontSize: '0.875rem' }}>
+                    {'<Accordion glass={true} />'}
+                  </code>
+                </div>
+              </div>
+            </Accordion>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// Glass Accordion with Rich Content
+export const GlassRichContent: Story = {
+  args: {
+    title: 'Glass Accordion with Rich Content',
+    children: <p>Rich content example</p>,
+  },
+  render: () => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '95vh',
+        overflow: 'auto',
+      }}
+    >
+      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+        <h2
+          style={{
+            textAlign: 'center',
+            color: 'white',
+            marginBottom: '3rem',
+            fontSize: '2rem',
+            textShadow: '0 2px 8px rgba(0,0,0,0.5)',
+          }}
+        >
+          Glass Accordion with Rich Content
+        </h2>
+
+        <div className="u-d-flex u-flex-column u-gap-3">
+          <Accordion title="Design Philosophy" defaultOpen={true} glass={true}>
+            <div>
+              <p style={{ marginBottom: '1rem' }}>
+                Our glass morphism design combines modern aesthetics with practical functionality.
+                The translucent effects create depth and visual hierarchy while maintaining
+                readability.
+              </p>
+              <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
+                <div
+                  style={{
+                    flex: 1,
+                    background: 'rgba(255,255,255,0.1)',
+                    padding: '1rem',
+                    borderRadius: '8px',
+                  }}
+                >
+                  <h5 style={{ marginBottom: '0.5rem' }}>Aesthetic</h5>
+                  <p style={{ fontSize: '0.875rem' }}>Beautiful, modern design</p>
+                </div>
+                <div
+                  style={{
+                    flex: 1,
+                    background: 'rgba(255,255,255,0.1)',
+                    padding: '1rem',
+                    borderRadius: '8px',
+                  }}
+                >
+                  <h5 style={{ marginBottom: '0.5rem' }}>Functional</h5>
+                  <p style={{ fontSize: '0.875rem' }}>Practical and usable</p>
+                </div>
+              </div>
+            </div>
+          </Accordion>
+
+          <Accordion
+            title="Component Features"
+            glass={
+              {
+                mode: 'polar',
+                displacementScale: 70,
+              } as any
+            }
+          >
+            <div>
+              <p style={{ marginBottom: '1rem' }}>
+                Explore the comprehensive features available in our glass accordion component:
+              </p>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
+                <div>✨ Glass morphism effects</div>
+                <div>🎨 Multiple visual modes</div>
+                <div>⚡ High performance</div>
+                <div>♿ Accessibility ready</div>
+                <div>📱 Mobile responsive</div>
+                <div>🎯 Easy customization</div>
+              </div>
+            </div>
+          </Accordion>
+
+          <Accordion
+            title="Implementation Examples"
+            glass={
+              {
+                mode: 'shader',
+                shaderVariant: 'liquidGlass',
+              } as any
+            }
+          >
+            <div>
+              <p style={{ marginBottom: '1rem' }}>
+                Multiple ways to implement glass effects in your application:
+              </p>
+              <div
+                style={{
+                  background: 'rgba(0,0,0,0.3)',
+                  padding: '1rem',
+                  borderRadius: '8px',
+                  marginBottom: '1rem',
+                }}
+              >
+                <code
+                  style={{
+                    color: '#fff',
+                    fontSize: '0.875rem',
+                    display: 'block',
+                    whiteSpace: 'pre',
+                  }}
+                >
+                  {`// Basic usage
+<Accordion glass={true} />
+
+// Custom configuration
+<Accordion glass={{
+  mode: 'polar',
+  displacementScale: 70
+}} />`}
+                </code>
+              </div>
+            </div>
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  ),
+};