diff --git a/README.md b/README.md
index 8bbb06c..906aa45 100644
--- a/README.md
+++ b/README.md
@@ -90,7 +90,7 @@ async function loadFile(file) {
 - **Error display** — parse/render/fetch errors shown in the viewer with retry support
 - **Debug overlay** — FPS, draw calls, lines, triangles
 - **Zoom level** — percentage display relative to fit-to-view
-- **TAA anti-aliasing** — smooth edges after idle accumulation
+- **Configurable antialiasing** — choose between MSAA (default, hardware), SMAA, FXAA, TAA, SSAA, or none
 - **TypeScript** — strict types, full `.d.ts` declarations
 
 ## Acknowledgements
diff --git a/demo/App.vue b/demo/App.vue
index 5fd4ae4..134b65e 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -89,6 +89,41 @@
         </div>
       </div>
 
+      <div class="aa-selector">
+        <span class="aa-label">Antialiasing:</span>
+        <select v-model="aaMode" class="aa-select">
+          <option value="none">None</option>
+          <option value="msaa">MSAA (hardware, default)</option>
+          <option value="smaa">SMAA</option>
+          <option value="fxaa">FXAA</option>
+          <option value="taa">TAA (jittered, idle-only)</option>
+          <option value="ssaa">SSAA (high quality, slow)</option>
+        </select>
+        <p class="aa-hint">{{ aaDescription }}</p>
+      </div>
+
+      <div class="overlays-card">
+        <p class="overlays-hint">
+          Overlays — click an empty cell to position, click the active (blue) cell to hide
+        </p>
+        <div class="overlay-rows">
+          <div v-for="row in overlayRows" :key="row.label" class="overlay-row">
+            <span class="overlay-label" :class="{ off: !row.isVisible() }">{{ row.label }}</span>
+            <div class="layout-mini-grid" role="radiogroup" :aria-label="`${row.label} position`">
+              <button
+                v-for="pos in overlayPositions"
+                :key="pos"
+                class="layout-cell"
+                :class="{ active: row.isVisible() && row.getPosition() === pos }"
+                :aria-label="pos"
+                :title="row.isVisible() && row.getPosition() === pos ? `${pos} (click to hide)` : pos"
+                @click="onCellClick(row, pos)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <p class="controls-hint">
         {{ isTouchDevice ? "Pinch to zoom · Drag to pan" : "Scroll to zoom · Drag to pan" }}
       </p>
@@ -113,16 +148,27 @@
 
       <div id="viewer" class="viewer-container">
         <DXFViewer
+          :key="aaMode"
           ref="dxfViewerRef"
           :dxf-data="dxfData"
           :file-name="currentFileName"
-          :show-reset-button="!!dxfData"
-          :show-coordinates="true"
-          :show-zoom-level="true"
-          :show-debug-info="true"
-          :show-export-button="true"
+          :show-reset-button="showResetButton"
+          :show-fullscreen-button="showFullscreenButton"
+          :show-export-button="showExportButton"
+          :show-file-name="showFileName"
+          :show-coordinates="showCoordinates"
+          :show-zoom-level="showZoomLevel"
+          :show-debug-info="showDebugInfo"
+          :show-layer-panel="showLayerPanel"
           :allow-drop="true"
+          :auto-fit="true"
+          :file-name-position="fileNamePosition"
+          :toolbar-position="toolbarPosition"
+          :coordinates-position="coordinatesPosition"
+          :debug-position="debugPosition"
+          :layer-panel-position="layerPanelPosition"
           :dark-theme="isDark"
+          :antialiasing="aaMode"
           @dxf-data="handleDXFData"
           @unsupported-entities="handleUnsupportedEntities"
           @error="handleError"
@@ -132,6 +178,7 @@
         />
       </div>
 
+      <StatsSection />
       <FeaturesSection />
       <WhatsNewSection />
       <ExamplesSection />
@@ -155,11 +202,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, nextTick } from "vue";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
 import { FileUploader, UnsupportedEntities, DXFViewer } from "dxf-vuer";
+import type { AntialiasingMode, OverlayPosition } from "dxf-vuer";
 import "dxf-vuer/style.css";
 import type { DxfData } from "dxf-render";
 import HeroSection from "./components/HeroSection.vue";
+import StatsSection from "./components/StatsSection.vue";
 import FeaturesSection from "./components/FeaturesSection.vue";
 import WhatsNewSection from "./components/WhatsNewSection.vue";
 import ExamplesSection from "./components/ExamplesSection.vue";
@@ -177,6 +226,107 @@ const currentFileName = ref<string>("");
 const dxfViewerRef = ref<InstanceType<typeof DXFViewer> | null>(null);
 const isLoadingSample = ref(false);
 const loadingSampleFile = ref<string | null>(null);
+const aaMode = ref<AntialiasingMode>("msaa");
+
+// Display option toggles (mirror DXFViewer prop defaults the demo overrides)
+const showFileName = ref(true);
+const showCoordinates = ref(true);
+const showZoomLevel = ref(true);
+const showDebugInfo = ref(true);
+const showResetButton = ref(true);
+const showFullscreenButton = ref(true);
+const showExportButton = ref(true);
+const showLayerPanel = ref(true);
+
+// Overlay positions
+const overlayPositions: OverlayPosition[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+
+const fileNamePosition = ref<OverlayPosition>("top-left");
+const toolbarPosition = ref<OverlayPosition>("top-right");
+const coordinatesPosition = ref<OverlayPosition>("bottom-left");
+const debugPosition = ref<OverlayPosition>("bottom-center");
+const layerPanelPosition = ref<OverlayPosition>("bottom-right");
+
+interface OverlayRow {
+  label: string;
+  getPosition: () => OverlayPosition;
+  setPosition: (p: OverlayPosition) => void;
+  isVisible: () => boolean;
+  setVisible: (v: boolean) => void;
+}
+
+const overlayRows: OverlayRow[] = [
+  {
+    label: "File name",
+    getPosition: () => fileNamePosition.value,
+    setPosition: (p) => (fileNamePosition.value = p),
+    isVisible: () => showFileName.value,
+    setVisible: (v) => (showFileName.value = v),
+  },
+  {
+    label: "Coordinates + Zoom",
+    getPosition: () => coordinatesPosition.value,
+    setPosition: (p) => (coordinatesPosition.value = p),
+    isVisible: () => showCoordinates.value || showZoomLevel.value,
+    setVisible: (v) => {
+      showCoordinates.value = v;
+      showZoomLevel.value = v;
+    },
+  },
+  {
+    label: "Toolbar",
+    getPosition: () => toolbarPosition.value,
+    setPosition: (p) => (toolbarPosition.value = p),
+    isVisible: () =>
+      showResetButton.value || showFullscreenButton.value || showExportButton.value,
+    setVisible: (v) => {
+      showResetButton.value = v;
+      showFullscreenButton.value = v;
+      showExportButton.value = v;
+    },
+  },
+  {
+    label: "Debug info",
+    getPosition: () => debugPosition.value,
+    setPosition: (p) => (debugPosition.value = p),
+    isVisible: () => showDebugInfo.value,
+    setVisible: (v) => (showDebugInfo.value = v),
+  },
+  {
+    label: "Layers panel",
+    getPosition: () => layerPanelPosition.value,
+    setPosition: (p) => (layerPanelPosition.value = p),
+    isVisible: () => showLayerPanel.value,
+    setVisible: (v) => (showLayerPanel.value = v),
+  },
+];
+
+const onCellClick = (row: OverlayRow, pos: OverlayPosition) => {
+  if (row.isVisible() && row.getPosition() === pos) {
+    row.setVisible(false);
+  } else {
+    row.setPosition(pos);
+    row.setVisible(true);
+  }
+};
+
+const aaDescriptions: Record<AntialiasingMode, string> = {
+  msaa: "Hardware multisampling: crisp geometric edges with no blur and almost free runtime cost. Best default for CAD lines and text.",
+  smaa: "Edge-detection post-processing AA. Smooths jagged lines without softening text noticeably; cheap and works while panning.",
+  fxaa: "Cheapest fullscreen AA — single shader pass. Smooths edges but tends to blur thin lines and small text.",
+  taa: "Temporal AA: accumulates 32 jittered frames after the camera stops. Very smooth on static views, but the first frame after movement looks aliased.",
+  ssaa: "Super-sampling: renders at higher resolution and downscales. Reference-quality image; expensive — not for interactive use on big drawings.",
+  none: "No antialiasing — raw rasterization. Maximum performance and pixel sharpness, with visible staircase aliasing on diagonal lines.",
+};
+
+const aaDescription = computed(() => aaDescriptions[aaMode.value]);
 
 const samples = [
   { file: "/entities.dxf", label: "Basic Entities", size: "191 KB" },
@@ -445,6 +595,137 @@ const resetView = () => {
   color: #ffcdd2;
 }
 
+.aa-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin: 0 auto var(--spacing-sm);
+  padding: 10px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  max-width: 820px;
+}
+
+.aa-hint {
+  font-size: 0.75rem;
+  color: var(--text-color);
+  margin: 0;
+  line-height: 1.4;
+  flex: 1;
+  text-align: left;
+}
+
+.app.dark .aa-selector {
+  border-color: #444;
+}
+
+.aa-label {
+  color: var(--text-color);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.aa-select {
+  padding: 4px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: white;
+  color: var(--text-color);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.aa-select:focus {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 1px;
+}
+
+.app.dark .aa-select {
+  background: #1e1e1e;
+  border-color: #444;
+  color: var(--text-color);
+}
+
+.overlays-card {
+  max-width: 820px;
+  margin: 0 auto var(--spacing-sm);
+  padding: 8px 16px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-size: 0.8125rem;
+}
+
+.overlays-hint {
+  margin: 0 0 8px;
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+  text-align: center;
+  line-height: 1.4;
+}
+
+.overlay-rows {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 22px;
+}
+
+.overlay-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.overlay-label {
+  color: var(--text-color);
+  font-weight: 600;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.overlay-label.off {
+  opacity: 0.55;
+}
+
+.layout-mini-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 14px);
+  grid-template-rows: repeat(2, 14px);
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.layout-cell {
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 2px;
+  background: transparent;
+  cursor: pointer;
+  transition: border-color 0.1s, background 0.1s;
+}
+
+.layout-cell:hover {
+  border-color: var(--primary-color);
+}
+
+.layout-cell.active {
+  background: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.app.dark .overlays-card,
+.app.dark .overlays-header {
+  border-color: #444;
+}
+
+.app.dark .layout-cell {
+  border-color: #555;
+}
+
 .controls-hint {
   text-align: center;
   font-size: 0.8125rem;
@@ -479,6 +760,17 @@ const resetView = () => {
   .viewer-container {
     height: 50vh;
   }
+
+  .aa-selector {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .aa-hint {
+    text-align: center;
+  }
+
 }
 
 /* Reduced motion */
diff --git a/demo/components/FeaturesSection.vue b/demo/components/FeaturesSection.vue
index 23e75e5..1330d48 100644
--- a/demo/components/FeaturesSection.vue
+++ b/demo/components/FeaturesSection.vue
@@ -23,7 +23,7 @@ const features = [
   {
     title: "WebGL Rendering",
     icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
-    body: "Three.js-powered rendering with TAA anti-aliasing, pan, zoom, layer visibility, instant dark theme switching, drag-and-drop, and PNG export.",
+    body: "Three.js-powered rendering with 6 antialiasing modes (MSAA, SMAA, FXAA, TAA, SSAA, none), pan, zoom, layer visibility, instant dark theme switching, drag-and-drop, and PNG export.",
   },
   {
     title: "High Performance",
diff --git a/demo/components/HeroSection.vue b/demo/components/HeroSection.vue
index 9571ba1..dfe75a9 100644
--- a/demo/components/HeroSection.vue
+++ b/demo/components/HeroSection.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="hero">
-    <span class="hero-brand">dxf-render</span>
+    <span class="hero-brand">dxf-render · dxf-vuer</span>
     <h1>Render AutoCAD DXF Drawings in&nbsp;the&nbsp;Browser</h1>
     <p class="hero-subtitle">
       TypeScript DXF parser and Three.js WebGL renderer. Use standalone with React, Svelte, or
@@ -38,27 +38,6 @@
         </svg>
       </button>
     </div>
-    <div class="hero-stats">
-      <div class="hero-stat">
-        <span class="hero-stat-value">21</span>
-        <span class="hero-stat-label">entity types</span>
-      </div>
-      <div class="hero-stat-divider" />
-      <div class="hero-stat">
-        <span class="hero-stat-value">−78%</span>
-        <span class="hero-stat-label">draw calls</span>
-      </div>
-      <div class="hero-stat-divider" />
-      <div class="hero-stat">
-        <span class="hero-stat-value">874</span>
-        <span class="hero-stat-label">tests</span>
-      </div>
-      <div class="hero-stat-divider" />
-      <div class="hero-stat">
-        <span class="hero-stat-value">Web Worker</span>
-        <span class="hero-stat-label">parsing</span>
-      </div>
-    </div>
   </section>
 </template>
 
@@ -174,43 +153,6 @@ async function copyInstallCommand() {
   flex-shrink: 0;
 }
 
-.hero-stats {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-lg);
-  margin-bottom: var(--spacing-lg);
-}
-
-.hero-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-.hero-stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--primary-color);
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.hero-stat-label {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.hero-stat-divider {
-  width: 1px;
-  height: 32px;
-  background: var(--border-color);
-}
-
 @media (max-width: 768px) {
   .hero {
     padding: 2rem var(--spacing-md) 1.5rem;
@@ -223,14 +165,6 @@ async function copyInstallCommand() {
   .hero-subtitle {
     font-size: 1rem;
   }
-
-  .hero-stats {
-    gap: var(--spacing-sm);
-  }
-
-  .hero-stat-value {
-    font-size: 1.25rem;
-  }
 }
 
 </style>
diff --git a/demo/components/StatsSection.vue b/demo/components/StatsSection.vue
new file mode 100644
index 0000000..be03a94
--- /dev/null
+++ b/demo/components/StatsSection.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="stats-section">
+    <h2>Basic features</h2>
+    <div class="stats">
+      <div class="stat">
+        <span class="stat-value">21</span>
+        <span class="stat-label">entity types</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat">
+        <span class="stat-value">0</span>
+        <span class="stat-label">parser deps</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat">
+        <span class="stat-value">878</span>
+        <span class="stat-label">tests</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat">
+        <span class="stat-value">Web Worker</span>
+        <span class="stat-label">parsing</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.stats-section {
+  max-width: var(--content-max-width);
+  margin: calc(var(--spacing-lg) * 2) auto var(--spacing-lg);
+  text-align: center;
+}
+
+.stats-section h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-color);
+  margin: 0 0 var(--spacing-md);
+}
+
+.stats {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 32px;
+  background: var(--border-color);
+}
+
+@media (max-width: 768px) {
+  .stats {
+    gap: var(--spacing-sm);
+  }
+
+  .stat-value {
+    font-size: 1.25rem;
+  }
+}
+</style>
diff --git a/demo/components/WhatsNewSection.vue b/demo/components/WhatsNewSection.vue
index cca32ec..a752e28 100644
--- a/demo/components/WhatsNewSection.vue
+++ b/demo/components/WhatsNewSection.vue
@@ -3,7 +3,10 @@
     <h2>What's New</h2>
     <div class="whats-new-list">
       <div v-for="item in whatsNew" :key="item.text" class="whats-new-item">
-        <span class="whats-new-version">{{ item.version }}</span>
+        <span class="whats-new-version" :class="`pkg-${item.pkg}`">
+          <span class="whats-new-pkg">{{ item.pkg }}</span>
+          <span class="whats-new-num">{{ item.version }}</span>
+        </span>
         <span class="whats-new-text">{{ item.text }}</span>
       </div>
     </div>
@@ -11,24 +14,77 @@
 </template>
 
 <script setup lang="ts">
-const whatsNew = [
+type Pkg = "dxf-render" | "dxf-vuer";
+
+interface WhatsNewItem {
+  pkg: Pkg;
+  version: string;
+  text: string;
+}
+
+const whatsNew: WhatsNewItem[] = [
+  {
+    pkg: "dxf-vuer",
+    version: "2.4.0",
+    text: "Configurable antialiasing — MSAA (default), SMAA, FXAA, TAA, SSAA, or none — pick the right tradeoff for your drawing",
+  },
   {
+    pkg: "dxf-vuer",
+    version: "2.4.0",
+    text: "Layers panel filter — text search by name, auto-shown for drawings with more than 5 layers",
+  },
+  {
+    pkg: "dxf-vuer",
+    version: "2.4.0",
+    text: "loadDXFFromBuffer / loadDXFFromBlob — load drawings from storage SDKs, IndexedDB, or fetch().blob() with UTF-8 / UTF-16 BOM auto-detection",
+  },
+  {
+    pkg: "dxf-vuer",
+    version: "2.4.0",
+    text: "Respects prefers-reduced-motion — TAA accumulation loop is skipped for users who opted into reduced motion",
+  },
+  {
+    pkg: "dxf-vuer",
+    version: "2.4.0",
+    text: "showLayerPanel prop — programmatically hide the layers panel",
+  },
+  {
+    pkg: "dxf-render",
     version: "1.2.0",
     text: "Variable-width polylines with per-vertex tapering, arrows, and donuts",
   },
   {
+    pkg: "dxf-render",
     version: "1.2.0",
     text: "GIS origin translation — large UTM/state plane coordinates without precision loss",
   },
-  { version: "1.2.0", text: "Touch support — native one-finger pan on mobile devices" },
-  { version: "1.1.0", text: "Theme-adaptive ACI 250-251 colors — dark grays invert in dark mode" },
   {
+    pkg: "dxf-render",
+    version: "1.2.0",
+    text: "Touch support — native one-finger pan on mobile devices",
+  },
+  {
+    pkg: "dxf-render",
+    version: "1.1.0",
+    text: "Theme-adaptive ACI 250-251 colors — dark grays invert in dark mode",
+  },
+  {
+    pkg: "dxf-vuer",
     version: "1.5.0",
     text: "TAA anti-aliasing — 32-frame temporal accumulation for crisp text and edges",
   },
-  { version: "1.5.0", text: "Instant dark mode — theme switching without full re-render" },
-  { version: "1.4.0", text: "MLINE, XLINE, RAY entities — multilines and construction lines" },
   {
+    pkg: "dxf-vuer",
+    version: "1.5.0",
+    text: "Instant dark mode — theme switching without full re-render",
+  },
+  {
+    pkg: "dxf-vuer",
+    version: "1.4.0",
+    text: "MLINE, XLINE, RAY entities — multilines and construction lines",
+  },
+  {
+    pkg: "dxf-vuer",
     version: "1.4.0",
     text: "25 built-in hatch patterns with solid fill optimization (86× faster)",
   },
@@ -68,12 +124,36 @@ const whatsNew = [
 
 .whats-new-version {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--primary-color);
-  background: var(--accent-bg, #f0f4ff);
   padding: 2px 8px;
   border-radius: 4px;
 }
+
+.whats-new-version.pkg-dxf-render {
+  color: var(--primary-color);
+  background: var(--accent-bg, #f0f4ff);
+}
+
+.whats-new-version.pkg-dxf-vuer {
+  color: #2e7d32;
+  background: #e8f5e9;
+}
+
+.app.dark .whats-new-version.pkg-dxf-vuer {
+  color: #81c784;
+  background: #1b3a1f;
+}
+
+.whats-new-pkg {
+  opacity: 0.85;
+}
+
+.whats-new-num {
+  opacity: 1;
+}
 </style>
diff --git a/packages/dxf-render/CHANGELOG.md b/packages/dxf-render/CHANGELOG.md
index 11aef8c..13cebdd 100644
--- a/packages/dxf-render/CHANGELOG.md
+++ b/packages/dxf-render/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.3.0
+
+### Features
+
+- **Configurable antialiasing pipeline**: new `scene/antialiasing.ts` module with framework-agnostic factories — `createRenderer({ aaMode })`, `createComposer({ aaMode, scene, camera, renderer })`, and `isReducedMotionPreferred()`. Six modes: `msaa` (default, hardware), `smaa`, `fxaa`, `taa`, `ssaa`, `none`. New exported type `AntialiasingMode`. Lets React / Svelte / vanilla users use the same AA palette that powers `dxf-vuer`'s `<DXFViewer>`.
+
+### Documentation
+
+- README: new "Antialiasing" section with comparison table and example.
+- npm search SEO: deduplicated keywords, added precise search phrases (`dxf-viewer`, `dxf-three`, `dxf-js`, `render-dxf`, `parser`, `viewer`, `blueprint`); homepage now points to the live demo; added the `bugs` field.
+
+### Bug Fixes
+
+- Added `"browser": { "fs": false }` to package.json — eliminates `Could not resolve "fs"` when bundling for the browser (Vite / esbuild / Angular CLI). The Node branch of `opentype.js` (file-system font loading) is now automatically stripped by downstream bundlers.
+
 ## 1.2.0
 
 ### Features
diff --git a/packages/dxf-render/README.md b/packages/dxf-render/README.md
index 218d658..f97e345 100644
--- a/packages/dxf-render/README.md
+++ b/packages/dxf-render/README.md
@@ -261,6 +261,46 @@ export function DxfViewer({ dxfText }: { dxfText: string }) {
 
 - `useCamera(domElement)` — orthographic camera with `fitCameraToBox()`
 - `useControls(camera, domElement)` — pan/zoom controls (no rotation), mobile touch support
+- `createRenderer({ aaMode })` — `WebGLRenderer` with the right `antialias` flag for the selected AA mode
+- `createComposer({ aaMode, scene, camera, renderer })` — builds the post-processing pipeline (`EffectComposer` + AA pass + `OutputPass`); returns `{ composer: null }` for `msaa`/`none` (use `renderer.render()` directly)
+- `isReducedMotionPreferred()` — `true` when the user has enabled "reduce motion" in their OS
+
+### Antialiasing
+
+Six modes available via `AntialiasingMode = "msaa" | "smaa" | "fxaa" | "taa" | "ssaa" | "none"`:
+
+| Mode | Use case |
+|------|----------|
+| `msaa` | Hardware multisampling (default). Crisp geometric edges, almost free runtime cost. Best for CAD with thin lines and text |
+| `smaa` | Edge-detection post-processing. Cheap and works while panning. Note: may fade pixels at corners of 1px lines (line-art limitation) |
+| `fxaa` | Cheapest fullscreen AA — single shader pass. Smooths edges but tends to blur thin lines and small text |
+| `taa` | Temporal AA: 32 jittered frames accumulated when the camera stops. Smooth on static views; first frame after movement looks aliased. Skipped when `prefers-reduced-motion: reduce` |
+| `ssaa` | Super-sampling: renders at higher resolution and downscales. Reference quality; expensive |
+| `none` | No antialiasing. Maximum performance and pixel sharpness |
+
+```ts
+import * as THREE from "three";
+import { createRenderer, createComposer, isReducedMotionPreferred } from "dxf-render";
+
+const scene = new THREE.Scene();
+const camera = new THREE.OrthographicCamera(/* ... */);
+const renderer = createRenderer({ aaMode: "msaa" });
+const { composer, taaPass } = createComposer({ aaMode: "msaa", scene, camera, renderer });
+
+function render() {
+  if (taaPass && composer) {
+    taaPass.accumulateIndex = -1;
+    composer.render();
+    if (!isReducedMotionPreferred()) {
+      // schedule next jittered frame via requestAnimationFrame...
+    }
+  } else if (composer) {
+    composer.render();
+  } else {
+    renderer.render(scene, camera);
+  }
+}
+```
 
 ### Fonts
 
diff --git a/packages/dxf-render/package.json b/packages/dxf-render/package.json
index 7a44249..8a8ab17 100644
--- a/packages/dxf-render/package.json
+++ b/packages/dxf-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dxf-render",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "DXF parser and Three.js renderer — parse and render AutoCAD DXF files in the browser. Framework-agnostic.",
   "type": "module",
   "license": "MIT",
@@ -41,6 +41,9 @@
   "main": "./dist/dxf-render-index.es.js",
   "module": "./dist/dxf-render-index.es.js",
   "types": "./dist/index.d.ts",
+  "browser": {
+    "fs": false
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
diff --git a/packages/dxf-render/src/index.ts b/packages/dxf-render/src/index.ts
index 431db91..c8e2463 100644
--- a/packages/dxf-render/src/index.ts
+++ b/packages/dxf-render/src/index.ts
@@ -12,6 +12,15 @@ export { computePolylinePoints } from "./render/collectors";
 // Scene helpers
 export { useCamera } from "./scene/useCamera";
 export { useControls, useOrbitControls } from "./scene/useControls";
+export {
+  createRenderer,
+  createComposer,
+  isReducedMotionPreferred,
+  type AntialiasingMode,
+  type CreateRendererOptions,
+  type CreateComposerOptions,
+  type AntialiasingPipeline,
+} from "./scene/antialiasing";
 
 // Fonts
 export { loadDefaultFont, loadFont, getDefaultFont, loadSerifFont, getSerifFont } from "./render/text/fontManager";
diff --git a/packages/dxf-render/src/scene/antialiasing.ts b/packages/dxf-render/src/scene/antialiasing.ts
new file mode 100644
index 0000000..fcea3cc
--- /dev/null
+++ b/packages/dxf-render/src/scene/antialiasing.ts
@@ -0,0 +1,103 @@
+import * as THREE from "three";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { TAARenderPass } from "three/addons/postprocessing/TAARenderPass.js";
+import { SSAARenderPass } from "three/addons/postprocessing/SSAARenderPass.js";
+import { SMAAPass } from "three/addons/postprocessing/SMAAPass.js";
+import { FXAAPass } from "three/addons/postprocessing/FXAAPass.js";
+import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+
+export type AntialiasingMode = "none" | "msaa" | "smaa" | "fxaa" | "taa" | "ssaa";
+
+export interface CreateRendererOptions {
+  aaMode?: AntialiasingMode;
+  alpha?: boolean;
+  preserveDrawingBuffer?: boolean;
+}
+
+/**
+ * Create a Three.js WebGLRenderer with the antialias flag set per AA mode.
+ * MSAA uses native hardware multisampling (antialias: true); other modes
+ * apply post-processing via createComposer() and use antialias: false.
+ */
+export function createRenderer(opts: CreateRendererOptions = {}): THREE.WebGLRenderer {
+  const { aaMode = "msaa", alpha = true, preserveDrawingBuffer = true } = opts;
+  const renderer = new THREE.WebGLRenderer({
+    antialias: aaMode === "msaa",
+    alpha,
+    preserveDrawingBuffer,
+  });
+  renderer.sortObjects = false;
+  return renderer;
+}
+
+export interface CreateComposerOptions {
+  aaMode: AntialiasingMode;
+  scene: THREE.Scene;
+  camera: THREE.Camera;
+  renderer: THREE.WebGLRenderer;
+}
+
+export interface AntialiasingPipeline {
+  /** EffectComposer for post-processing AA modes; null for msaa/none (render direct). */
+  composer: EffectComposer | null;
+  /** Reference to TAARenderPass when aaMode === "taa", for accumulation control. */
+  taaPass: (TAARenderPass & { accumulateIndex: number }) | null;
+}
+
+/**
+ * Build the post-processing pipeline for the given AA mode.
+ * Returns { composer: null, taaPass: null } for msaa/none — caller should
+ * call renderer.render(scene, camera) directly. For other modes, returns a
+ * configured EffectComposer to be invoked via composer.render().
+ */
+export function createComposer(opts: CreateComposerOptions): AntialiasingPipeline {
+  const { aaMode, scene, camera, renderer } = opts;
+
+  if (aaMode === "msaa" || aaMode === "none") {
+    return { composer: null, taaPass: null };
+  }
+
+  const composer = new EffectComposer(renderer);
+  let taaPass: AntialiasingPipeline["taaPass"] = null;
+
+  if (aaMode === "taa") {
+    const pass = new TAARenderPass(scene, camera) as TAARenderPass & {
+      accumulateIndex: number;
+    };
+    pass.accumulate = true;
+    composer.addPass(pass);
+    taaPass = pass;
+  } else if (aaMode === "ssaa") {
+    composer.addPass(new SSAARenderPass(scene, camera));
+  } else if (aaMode === "smaa") {
+    composer.addPass(new RenderPass(scene, camera));
+    const smaa = new SMAAPass();
+    const size = new THREE.Vector2();
+    renderer.getSize(size);
+    const pixelRatio = renderer.getPixelRatio();
+    smaa.setSize(size.x * pixelRatio, size.y * pixelRatio);
+    composer.addPass(smaa);
+  } else if (aaMode === "fxaa") {
+    composer.addPass(new RenderPass(scene, camera));
+    const fxaa = new FXAAPass();
+    const size = new THREE.Vector2();
+    renderer.getSize(size);
+    const pixelRatio = renderer.getPixelRatio();
+    fxaa.setSize(size.x * pixelRatio, size.y * pixelRatio);
+    composer.addPass(fxaa);
+  }
+
+  // OutputPass converts from linear to sRGB color space for correct color display
+  composer.addPass(new OutputPass());
+  return { composer, taaPass };
+}
+
+/**
+ * Returns true if the user has enabled "reduce motion" in their OS.
+ * Use this to skip animations like TAA jitter accumulation.
+ */
+export function isReducedMotionPreferred(): boolean {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
diff --git a/packages/dxf-vuer/CHANGELOG.md b/packages/dxf-vuer/CHANGELOG.md
index a8e9eac..7524c49 100644
--- a/packages/dxf-vuer/CHANGELOG.md
+++ b/packages/dxf-vuer/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Changelog
 
+## 2.4.0
+
+### Features
+
+- **`antialiasing` prop**: choose the AA mode at init time — `msaa` (default, hardware), `smaa`, `fxaa`, `taa`, `ssaa`, or `none`. Default changed from TAA to MSAA for crisper thin lines and text in CAD drawings. Init-time only — recreate the component via `:key` to switch at runtime. Powered by the new `createRenderer` / `createComposer` factories in `dxf-render` 1.3.0; `AntialiasingMode` is now imported from `dxf-render` (still re-exported from `dxf-vuer` for backward compatibility).
+- **`showLayerPanel` prop**: hide the layers panel programmatically (default `true`). Position is still controlled by the existing `layerPanelPosition`.
+- **Layers panel filter**: text input for searching layers by name. Auto-shown when the drawing has more than 5 layers.
+- **`loadDXFFromBuffer` and `loadDXFFromBlob` methods**: load drawings from `ArrayBuffer` or `Blob` for integrations with IndexedDB, S3, Supabase Storage and other binary sources. Auto-detects encoding (UTF-8, UTF-16 LE/BE) by BOM.
+- **`prefers-reduced-motion` support**: when the user has enabled "reduce motion" in the OS, the TAA mode renders a single frame and skips the 32-frame jittered accumulation loop. Other AA modes are unaffected.
+
+### Documentation
+
+- npm search SEO: added keywords (`dxf-renderer`, `dxf-three`, `render-dxf`, `parser`), added the `bugs` field.
+
+### Dependencies
+
+- Requires `dxf-render` ≥ 1.3.0 (new AA pipeline factories).
+
 ## 2.3.0
 
 ### Features
diff --git a/packages/dxf-vuer/README.md b/packages/dxf-vuer/README.md
index 0ed32a9..e6c809f 100644
--- a/packages/dxf-vuer/README.md
+++ b/packages/dxf-vuer/README.md
@@ -65,9 +65,11 @@ async function loadFile(file) {
 | `showCoordinates` | `boolean` | `false` | Show cursor world coordinates on hover |
 | `showZoomLevel` | `boolean` | `false` | Show zoom percentage (100% = fit-to-view) |
 | `showDebugInfo` | `boolean` | `false` | Show debug overlay (FPS, draw calls, lines, triangles) |
+| `showLayerPanel` | `boolean` | `true` | Show the layers panel (auto-hidden when the drawing has no layers) |
 | `allowDrop` | `boolean` | `false` | Enable drag-and-drop file loading |
 | `darkTheme` | `boolean` | `false` | Dark theme for viewer and scene |
 | `autoFit` | `boolean` | `true` | Auto-fit camera to drawing on load |
+| `antialiasing` | `AntialiasingMode` | `"msaa"` | Anti-aliasing mode (init-time only — recreate the component via `:key` to switch) |
 | `fontUrl` | `string` | `""` | Custom font URL for text rendering |
 | `fileNamePosition` | `OverlayPosition` | `"top-left"` | Position of file name overlay |
 | `toolbarPosition` | `OverlayPosition` | `"top-right"` | Position of toolbar |
@@ -78,6 +80,23 @@ async function loadFile(file) {
 
 `OverlayPosition` = `"top-left"` | `"top-center"` | `"top-right"` | `"bottom-left"` | `"bottom-center"` | `"bottom-right"`
 
+`AntialiasingMode` = `"msaa"` | `"smaa"` | `"fxaa"` | `"taa"` | `"ssaa"` | `"none"`
+
+| Mode | Description |
+|------|-------------|
+| `msaa` | Hardware multisample antialiasing (default). Crisp geometric edges, almost free runtime cost. Best for CAD with thin lines and text |
+| `smaa` | Edge-detection post-processing AA. Cheap and works while panning. **Note:** can fade pixels at corners of 1px lines — known limitation when applied to line art |
+| `fxaa` | Cheapest fullscreen AA — single shader pass. Smooths edges but tends to blur thin lines and small text |
+| `taa` | Temporal AA: accumulates 32 jittered frames after the camera stops. Very smooth on static views; first frame after movement looks aliased |
+| `ssaa` | Super-sampling: renders at higher resolution and downscales. Reference quality; expensive — not recommended for interactive use on large drawings |
+| `none` | No antialiasing. Maximum performance and pixel sharpness, with visible staircase aliasing on diagonals |
+
+`antialiasing` is init-time only — the renderer is built once with the chosen mode. To let users switch at runtime, recreate `<DXFViewer>` via Vue's `:key` attribute:
+
+```vue
+<DXFViewer :key="aaMode" :antialiasing="aaMode" :dxf-data="dxfData" />
+```
+
 ## DXFViewer Slots
 
 | Slot | Scoped data | Description |
@@ -117,12 +136,48 @@ async function loadFile(file) {
 | `reset-view` | — | Emitted when view is reset to fit |
 | `file-dropped` | `string` | File name when a file is dropped |
 
+## DXFViewer Methods (via `ref`)
+
+| Method | Description |
+|--------|-------------|
+| `loadDXFFromText(text: string)` | Load from a DXF string |
+| `loadDXFFromData(data: DxfData)` | Load already-parsed DXF data |
+| `loadDXFFromUrl(url: string)` | Fetch and load from a URL |
+| `loadDXFFromBuffer(buffer: ArrayBuffer)` | Load from an ArrayBuffer (auto-decodes UTF-8 / UTF-16 LE/BE by BOM) |
+| `loadDXFFromBlob(blob: Blob)` | Load from a Blob (storage SDKs, drag-and-drop, fetch().blob()) |
+| `resize()` | Trigger viewer resize |
+| `resetView()` | Fit camera to drawing |
+| `exportToPNG()` | Trigger PNG download |
+| `getRenderer()` | Access the underlying Three.js `WebGLRenderer` |
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { DXFViewer } from 'dxf-vuer'
+
+const viewer = ref(null)
+
+async function loadFromStorage() {
+  const blob = await fetch('https://storage.example.com/file.dxf').then(r => r.blob())
+  viewer.value.loadDXFFromBlob(blob)
+}
+</script>
+
+<template>
+  <DXFViewer ref="viewer" />
+</template>
+```
+
+## Accessibility
+
+- **`prefers-reduced-motion`** — when the user has enabled "reduce motion" in their OS, the TAA antialiasing mode renders a single frame without the 32-frame jitter accumulation animation. Other AA modes are unaffected.
+
 ## Composables
 
 | Composable | Description |
 |------------|-------------|
 | `useDXFRenderer` | Main orchestrator: parsing, display, resize, layer visibility, dark theme |
-| `useThreeScene` | Three.js scene/renderer init with TAA anti-aliasing |
+| `useThreeScene` | Three.js scene/renderer init with configurable antialiasing (MSAA/SMAA/FXAA/TAA/SSAA/none) |
 | `useLayers` | Layer visibility state management |
 
 ## Re-exports
diff --git a/packages/dxf-vuer/package.json b/packages/dxf-vuer/package.json
index 8f4875f..8f9702b 100644
--- a/packages/dxf-vuer/package.json
+++ b/packages/dxf-vuer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dxf-vuer",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Vue 3 DXF file viewer — render AutoCAD DXF drawings in the browser with Three.js. Built-in parser, vector text rendering, TypeScript support.",
   "type": "module",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "dxf-render": "^1.2.0",
+    "dxf-render": "^1.3.0",
     "three": ">=0.160.0",
     "vue": "^3.4.0"
   },
diff --git a/packages/dxf-vuer/src/components/DXFViewer.vue b/packages/dxf-vuer/src/components/DXFViewer.vue
index 0654538..8be05d1 100644
--- a/packages/dxf-vuer/src/components/DXFViewer.vue
+++ b/packages/dxf-vuer/src/components/DXFViewer.vue
@@ -83,7 +83,7 @@
         </div>
 
         <LayerPanel
-          v-if="layerPanelPosition === pos && layerList.length > 0"
+          v-if="showLayerPanel && layerPanelPosition === pos && layerList.length > 0"
           :layers="layerList"
           @toggle-layer="handleToggleLayer"
           @show-all="handleShowAllLayers"
@@ -191,6 +191,7 @@ import { useLayers } from "../composables/useLayers";
 import { useLoadError } from "../composables/useLoadError";
 import type { DxfData, DxfLayer } from "dxf-render";
 import type { OverlayPosition } from "../types";
+import type { AntialiasingMode } from "dxf-render";
 import LayerPanel from "./LayerPanel.vue";
 import ViewerToolbar from "./ViewerToolbar.vue";
 
@@ -211,9 +212,11 @@ interface Props {
   showDebugInfo?: boolean;
   showFileName?: boolean;
   showExportButton?: boolean;
+  showLayerPanel?: boolean;
   allowDrop?: boolean;
   darkTheme?: boolean;
   fontUrl?: string;
+  antialiasing?: AntialiasingMode;
   fileNamePosition?: OverlayPosition;
   toolbarPosition?: OverlayPosition;
   coordinatesPosition?: OverlayPosition;
@@ -234,9 +237,11 @@ const props = withDefaults(defineProps<Props>(), {
   showDebugInfo: false,
   showFileName: true,
   showExportButton: false,
+  showLayerPanel: true,
   allowDrop: false,
   darkTheme: false,
   fontUrl: "",
+  antialiasing: "msaa",
   fileNamePosition: "top-left",
   toolbarPosition: "top-right",
   coordinatesPosition: "bottom-left",
@@ -482,6 +487,29 @@ const loadDXFFromData = async (dxfData: DxfData) => {
   }
 };
 
+const decodeBuffer = (buffer: ArrayBuffer): string => {
+  const view = new Uint8Array(buffer);
+  // UTF-16 LE BOM (DXF files saved by AutoCAD with non-ASCII content)
+  if (view.length >= 2 && view[0] === 0xff && view[1] === 0xfe) {
+    return new TextDecoder("utf-16le").decode(buffer);
+  }
+  // UTF-16 BE BOM
+  if (view.length >= 2 && view[0] === 0xfe && view[1] === 0xff) {
+    return new TextDecoder("utf-16be").decode(buffer);
+  }
+  // UTF-8 (with or without BOM — TextDecoder strips it automatically)
+  return new TextDecoder("utf-8").decode(buffer);
+};
+
+const loadDXFFromBuffer = async (buffer: ArrayBuffer) => {
+  await loadDXFFromText(decodeBuffer(buffer));
+};
+
+const loadDXFFromBlob = async (blob: Blob) => {
+  const buffer = await blob.arrayBuffer();
+  await loadDXFFromBuffer(buffer);
+};
+
 const loadDXFFromUrl = async (url: string) => {
   clearError();
   isLoading.value = true;
@@ -545,7 +573,7 @@ onMounted(() => {
   document.addEventListener("fullscreenchange", onFullscreenChange);
   nextTick(() => {
     if (dxfContainer.value) {
-      initThreeJS(dxfContainer.value, { enableControls: true });
+      initThreeJS(dxfContainer.value, { enableControls: true, aaMode: props.antialiasing });
 
       if (props.url) {
         loadDXFFromUrl(props.url);
@@ -575,6 +603,8 @@ defineExpose({
   loadDXFFromText,
   loadDXFFromData,
   loadDXFFromUrl,
+  loadDXFFromBuffer,
+  loadDXFFromBlob,
   resize,
   resetView,
   exportToPNG,
diff --git a/packages/dxf-vuer/src/components/LayerPanel.vue b/packages/dxf-vuer/src/components/LayerPanel.vue
index 0e91fa1..4df34cc 100644
--- a/packages/dxf-vuer/src/components/LayerPanel.vue
+++ b/packages/dxf-vuer/src/components/LayerPanel.vue
@@ -13,9 +13,27 @@
         <button @click.stop="$emit('hide-all')" class="action-btn">None</button>
       </div>
 
+      <div v-if="layers.length > 5" class="layer-filter-wrapper">
+        <input
+          v-model="filter"
+          type="text"
+          class="layer-filter"
+          placeholder="Filter layers…"
+          aria-label="Filter layers by name"
+          @click.stop
+        />
+        <button
+          v-if="filter"
+          class="layer-filter-clear"
+          aria-label="Clear filter"
+          @click.stop="filter = ''"
+        >×</button>
+      </div>
+
       <div class="layer-list">
+        <div v-if="filteredLayers.length === 0" class="layer-empty">No layers match "{{ filter }}"</div>
         <div
-          v-for="layer in layers"
+          v-for="layer in filteredLayers"
           :key="layer.name"
           class="layer-item"
           :class="{ hidden: !layer.visible, frozen: layer.frozen }"
@@ -96,14 +114,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import type { LayerState } from "../composables/useLayers";
 
 interface Props {
   layers: LayerState[];
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 defineEmits<{
   (e: "toggle-layer", layerName: string): void;
@@ -112,6 +130,13 @@ defineEmits<{
 }>();
 
 const isExpanded = ref(true);
+const filter = ref("");
+
+const filteredLayers = computed(() => {
+  const q = filter.value.trim().toLowerCase();
+  if (!q) return props.layers;
+  return props.layers.filter((l) => l.name.toLowerCase().includes(q));
+});
 </script>
 
 <style scoped>
@@ -194,6 +219,61 @@ const isExpanded = ref(true);
   color: var(--dxf-vuer-primary-color, #1040b0);
 }
 
+.layer-filter-wrapper {
+  position: relative;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--dxf-vuer-border-color, #e0e0e0);
+  flex-shrink: 0;
+}
+
+.layer-filter {
+  width: 100%;
+  padding: 3px 22px 3px 6px;
+  font-size: 11px;
+  border: 1px solid var(--dxf-vuer-border-color, #e0e0e0);
+  border-radius: 3px;
+  background: white;
+  color: var(--dxf-vuer-text-color, #212121);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.layer-filter:focus {
+  border-color: var(--dxf-vuer-primary-color, #1040b0);
+}
+
+.layer-filter::placeholder {
+  color: var(--dxf-vuer-text-secondary, #757575);
+}
+
+.layer-filter-clear {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--dxf-vuer-text-secondary, #757575);
+}
+
+.layer-filter-clear:hover {
+  color: var(--dxf-vuer-text-color, #212121);
+}
+
+.layer-empty {
+  padding: 8px 10px;
+  font-size: 11px;
+  font-style: italic;
+  color: var(--dxf-vuer-text-secondary, #757575);
+  text-align: center;
+}
+
 .layer-list {
   overflow-y: auto;
   max-height: 300px;
diff --git a/packages/dxf-vuer/src/composables/useThreeScene.ts b/packages/dxf-vuer/src/composables/useThreeScene.ts
index d81870d..0a4d98a 100644
--- a/packages/dxf-vuer/src/composables/useThreeScene.ts
+++ b/packages/dxf-vuer/src/composables/useThreeScene.ts
@@ -1,18 +1,21 @@
 import { ref } from "vue";
 import * as THREE from "three";
-import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
-import { TAARenderPass } from "three/addons/postprocessing/TAARenderPass.js";
-import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
 import {
   useControls,
   CAMERA_NEAR_PLANE,
   CAMERA_FAR_PLANE,
   CAMERA_INITIAL_Z_POSITION,
   SCENE_BG_COLOR,
+  createRenderer,
+  createComposer,
+  isReducedMotionPreferred,
+  type AntialiasingMode,
+  type AntialiasingPipeline,
 } from "dxf-render";
 
 export interface ThreeJSOptions {
   enableControls?: boolean;
+  aaMode?: AntialiasingMode;
 }
 
 interface MaterialWithTextures extends THREE.Material {
@@ -38,9 +41,8 @@ export function useThreeScene() {
   let scene: THREE.Scene | null = null;
   let camera: THREE.OrthographicCamera | null = null;
   let renderer: THREE.WebGLRenderer | null = null;
-  let composer: EffectComposer | null = null;
-  // accumulateIndex exists at runtime but is missing from @types/three
-  let taaPass: (TAARenderPass & { accumulateIndex: number }) | null = null;
+  let composer: AntialiasingPipeline["composer"] = null;
+  let taaPass: AntialiasingPipeline["taaPass"] = null;
   let accumulationFrameId: number | null = null;
 
   const {
@@ -117,7 +119,7 @@ export function useThreeScene() {
   };
 
   const initThreeJS = (container: HTMLDivElement, options: ThreeJSOptions = {}) => {
-    const { enableControls = false } = options;
+    const { enableControls = false, aaMode = "msaa" } = options;
 
     error.value = null;
 
@@ -148,12 +150,7 @@ export function useThreeScene() {
     camera.zoom = 1;
 
     try {
-      renderer = new THREE.WebGLRenderer({
-        antialias: false,
-        alpha: true,
-        preserveDrawingBuffer: true,
-      });
-      renderer.sortObjects = false;
+      renderer = createRenderer({ aaMode });
       renderer.setSize(containerWidth, containerHeight);
     } catch (err) {
       const errorMessage =
@@ -163,13 +160,9 @@ export function useThreeScene() {
       return;
     }
 
-    // TAA post-processing: accumulates jittered frames when idle for smooth AA
-    composer = new EffectComposer(renderer);
-    taaPass = new TAARenderPass(scene, camera) as TAARenderPass & { accumulateIndex: number };
-    taaPass.accumulate = true;
-    composer.addPass(taaPass);
-    // OutputPass converts from linear to sRGB color space for correct color display
-    composer.addPass(new OutputPass());
+    const pipeline = createComposer({ aaMode, scene, camera, renderer });
+    composer = pipeline.composer;
+    taaPass = pipeline.taaPass;
 
     container.appendChild(renderer.domElement);
 
@@ -202,8 +195,8 @@ export function useThreeScene() {
     if (composer) {
       composer.dispose();
       composer = null;
-      taaPass = null;
     }
+    taaPass = null;
 
     if (renderer) {
       renderer.dispose();
@@ -237,13 +230,28 @@ export function useThreeScene() {
     accumulationFrameId = requestAnimationFrame(accumulateFrame);
   };
 
-  // Render one frame immediately, then start TAA accumulation loop
   const renderScene = () => {
-    if (!composer || !taaPass) return;
-    stopAccumulation();
-    taaPass.accumulateIndex = -1;
-    composer.render();
-    accumulationFrameId = requestAnimationFrame(accumulateFrame);
+    if (!renderer || !scene || !camera) return;
+
+    if (taaPass && composer) {
+      stopAccumulation();
+      taaPass.accumulateIndex = -1;
+      composer.render();
+      // Skip jittered accumulation loop when user prefers reduced motion —
+      // the slowly-resolving frames read as animation
+      if (!isReducedMotionPreferred()) {
+        accumulationFrameId = requestAnimationFrame(accumulateFrame);
+      }
+      return;
+    }
+
+    if (composer) {
+      composer.render();
+      return;
+    }
+
+    // MSAA / none: direct render
+    renderer.render(scene, camera);
   };
 
   const resizeComposer = (width: number, height: number) => {