diff --git a/src/components/effects/index.ts b/src/components/effects/index.ts
index 61eb585..16bf551 100644
--- a/src/components/effects/index.ts
+++ b/src/components/effects/index.ts
@@ -18,3 +18,4 @@ export { FluidWaveBackground } from './fluid-wave-background';
 export { AdvancedFloatingEffects } from './advanced-floating-effects';
 export { ParallaxEffect } from './parallax-effect';
 export { SealAnimationEnhanced } from './seal-animation-enhanced';
+export { InkDataMorph } from './ink-data-morph';
diff --git a/src/components/effects/ink-data-morph.test.tsx b/src/components/effects/ink-data-morph.test.tsx
new file mode 100644
index 0000000..143e6b1
--- /dev/null
+++ b/src/components/effects/ink-data-morph.test.tsx
@@ -0,0 +1,128 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InkDataMorph } from './ink-data-morph';
+
+jest.mock('@/hooks/use-reduced-motion', () => ({
+  useReducedMotion: () => false,
+}));
+
+class MockCanvasContext {
+  fillStyle = '';
+  strokeStyle = '';
+  lineWidth = 0;
+  beginPath = jest.fn();
+  arc = jest.fn();
+  fill = jest.fn();
+  stroke = jest.fn();
+  moveTo = jest.fn();
+  lineTo = jest.fn();
+  save = jest.fn();
+  restore = jest.fn();
+  clearRect = jest.fn();
+  fillRect = jest.fn();
+  setTransform = jest.fn();
+  createRadialGradient = jest.fn(() => ({
+    addColorStop: jest.fn(),
+  }));
+}
+
+describe('InkDataMorph', () => {
+  let mockContext: MockCanvasContext;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockContext = new MockCanvasContext();
+
+    HTMLCanvasElement.prototype.getContext = jest.fn().mockReturnValue(mockContext);
+    Object.defineProperty(HTMLCanvasElement.prototype, 'width', {
+      configurable: true,
+      value: 1920,
+      writable: true,
+    });
+    Object.defineProperty(HTMLCanvasElement.prototype, 'height', {
+      configurable: true,
+      value: 1080,
+      writable: true,
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render a canvas element', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph className="custom-class" />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveClass('custom-class');
+    });
+
+    it('should have aria-hidden attribute', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('should have pointer-events-none class', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toHaveClass('pointer-events-none');
+    });
+  });
+
+  describe('Canvas initialization', () => {
+    it('should render canvas with correct dimensions', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+  });
+
+  describe('Props', () => {
+    it('should accept custom colors', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph
+            primaryColor="#000000"
+            accentColor="#FF0000"
+            connectionColor="#00FF00"
+          />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+
+    it('should accept custom particleCount', () => {
+      const { container } = render(
+        <div style={{ width: 960, height: 540 }}>
+          <InkDataMorph particleCount={50} />
+        </div>
+      );
+      const canvas = container.querySelector('canvas');
+      expect(canvas).toBeInTheDocument();
+    });
+  });
+});