diff --git a/src/components/effects/ink-data-morph.test.tsx b/src/components/effects/ink-data-morph.test.tsx
index 143e6b1..f8ed106 100644
--- a/src/components/effects/ink-data-morph.test.tsx
+++ b/src/components/effects/ink-data-morph.test.tsx
@@ -10,20 +10,32 @@ class MockCanvasContext {
   fillStyle = '';
   strokeStyle = '';
   lineWidth = 0;
+  lineCap = '';
+  globalAlpha = 1;
+  globalCompositeOperation = 'source-over';
   beginPath = jest.fn();
   arc = jest.fn();
+  ellipse = jest.fn();
   fill = jest.fn();
   stroke = jest.fn();
   moveTo = jest.fn();
   lineTo = jest.fn();
+  quadraticCurveTo = jest.fn();
+  closePath = jest.fn();
   save = jest.fn();
   restore = jest.fn();
   clearRect = jest.fn();
   fillRect = jest.fn();
   setTransform = jest.fn();
+  translate = jest.fn();
+  rotate = jest.fn();
   createRadialGradient = jest.fn(() => ({
     addColorStop: jest.fn(),
   }));
+  createLinearGradient = jest.fn(() => ({
+    addColorStop: jest.fn(),
+  }));
+  createPattern = jest.fn(() => ({}));
 }
 
 describe('InkDataMorph', () => {
@@ -100,29 +112,87 @@ describe('InkDataMorph', () => {
     });
   });
 
-  describe('Props', () => {
-    it('should accept custom colors', () => {
+  describe('Responsive behavior', () => {
+    it('should render on mobile viewport with reduced effects', () => {
       const { container } = render(
-        <div style={{ width: 960, height: 540 }}>
-          <InkDataMorph
-            primaryColor="#000000"
-            accentColor="#FF0000"
-            connectionColor="#00FF00"
-          />
+        <div style={{ width: 375, height: 667 }}>
+          <InkDataMorph />
         </div>
       );
       const canvas = container.querySelector('canvas');
       expect(canvas).toBeInTheDocument();
     });
 
-    it('should accept custom particleCount', () => {
+    it('should render on tablet viewport', () => {
       const { container } = render(
-        <div style={{ width: 960, height: 540 }}>
-          <InkDataMorph particleCount={50} />
+        <div style={{ width: 900, height: 600 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render on desktop viewport with full effects', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph />
         </div>
       );
       const canvas = container.querySelector('canvas');
       expect(canvas).toBeInTheDocument();
     });
   });
+
+  describe('Ink wash enhancement', () => {
+    it('should render without errors on mobile without feibai', () => {
+      const { container } = render(
+        <div style={{ width: 375, height: 667 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render without errors on tablet with feibai', () => {
+      const { container } = render(
+        <div style={{ width: 900, height: 600 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render without errors on desktop with full effects', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should render canvas with correct aria attributes', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('should accept custom className prop', () => {
+      const { container } = render(
+        <div style={{ width: 1440, height: 900 }}>
+          <InkDataMorph className="ink-enhanced" />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveClass('ink-enhanced');
+    });
+  });
 });