diff --git a/apps/website/src/components/landing/HighlightedCode.tsx b/apps/website/src/components/landing/HighlightedCode.tsx
new file mode 100644
index 000000000..f1b7d8b44
--- /dev/null
+++ b/apps/website/src/components/landing/HighlightedCode.tsx
@@ -0,0 +1,21 @@
+import { codeToHtml } from 'shiki';
+
+interface HighlightedCodeProps {
+  code: string;
+  lang?: string;
+}
+
+export async function HighlightedCode({ code, lang = 'typescript' }: HighlightedCodeProps) {
+  const html = await codeToHtml(code.trim(), {
+    lang,
+    theme: 'tokyo-night',
+  });
+
+  return (
+    <div
+      className="shiki"
+      style={{ margin: 0, borderRadius: 0 }}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
diff --git a/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx b/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
index 01880d836..4f15233df 100644
--- a/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
+++ b/apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
@@ -1,7 +1,5 @@
-// apps/website/src/components/landing/angular/AngularCodeShowcase.tsx
-'use client';
-import { motion } from 'framer-motion';
 import { tokens } from '@cacheplane/design-tokens';
+import { HighlightedCode } from '../HighlightedCode';
 
 const SNIPPET_1 = `import { agent } from '@cacheplane/angular';
 
@@ -27,16 +25,15 @@ provideAgent({
     : new FetchStreamTransport(),
 });`;
 
-export function AngularCodeShowcase() {
+const SNIPPETS = [
+  { title: 'Minimal Setup', code: SNIPPET_1, lang: 'typescript' },
+  { title: 'Full Configuration', code: SNIPPET_2, lang: 'typescript' },
+];
+
+export async function AngularCodeShowcase() {
   return (
     <section style={{ padding: '80px 32px' }}>
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
-        style={{ textAlign: 'center', marginBottom: 48 }}
-      >
+      <div style={{ textAlign: 'center', marginBottom: 48 }}>
         <p style={{
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
           fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
@@ -51,19 +48,15 @@ export function AngularCodeShowcase() {
         }}>
           Production streaming in a few lines
         </h2>
-      </motion.div>
+      </div>
 
       <div style={{
         maxWidth: 900, margin: '0 auto',
         display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
       }}>
-        {[{ title: 'Minimal Setup', code: SNIPPET_1 }, { title: 'Full Configuration', code: SNIPPET_2 }].map((s, i) => (
-          <motion.div
+        {SNIPPETS.map((s) => (
+          <div
             key={s.title}
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.45, delay: i * 0.1 }}
             style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.glass.border}` }}
           >
             <div style={{
@@ -77,14 +70,8 @@ export function AngularCodeShowcase() {
                 {s.title}
               </span>
             </div>
-            <pre style={{
-              background: '#1a1b26', color: '#c8ccee', padding: '20px 24px',
-              fontSize: '0.78rem', lineHeight: 1.65, margin: 0, overflowX: 'auto',
-              fontFamily: "'JetBrains Mono', monospace",
-            }}>
-              <code>{s.code}</code>
-            </pre>
-          </motion.div>
+            <HighlightedCode code={s.code} lang={s.lang} />
+          </div>
         ))}
       </div>
     </section>
diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
index f84aad841..3a07dcb18 100644
--- a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
+++ b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
@@ -1,7 +1,5 @@
-// apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
-'use client';
-import { motion } from 'framer-motion';
 import { tokens } from '@cacheplane/design-tokens';
+import { HighlightedCode } from '../HighlightedCode';
 
 const SNIPPET_1 = `import { ChatComponent } from '@cacheplane/chat';
 
@@ -28,16 +26,15 @@ const SNIPPET_2 = `chat {
   --chat-input-border: 1px solid #e4e4e7;
 }`;
 
-export function ChatLandingCodeShowcase() {
+const SNIPPETS = [
+  { title: 'Prebuilt Chat', code: SNIPPET_1, lang: 'typescript' },
+  { title: 'Custom Theming', code: SNIPPET_2, lang: 'css' },
+];
+
+export async function ChatLandingCodeShowcase() {
   return (
     <section style={{ padding: '80px 32px' }}>
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
-        style={{ textAlign: 'center', marginBottom: 48 }}
-      >
+      <div style={{ textAlign: 'center', marginBottom: 48 }}>
         <p style={{
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
           fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
@@ -52,19 +49,15 @@ export function ChatLandingCodeShowcase() {
         }}>
           Full-featured chat in a few lines
         </h2>
-      </motion.div>
+      </div>
 
       <div style={{
         maxWidth: 900, margin: '0 auto',
         display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
       }}>
-        {[{ title: 'Prebuilt Chat', code: SNIPPET_1 }, { title: 'Custom Theming', code: SNIPPET_2 }].map((s, i) => (
-          <motion.div
+        {SNIPPETS.map((s) => (
+          <div
             key={s.title}
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.45, delay: i * 0.1 }}
             style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.glass.border}` }}
           >
             <div style={{
@@ -78,14 +71,8 @@ export function ChatLandingCodeShowcase() {
                 {s.title}
               </span>
             </div>
-            <pre style={{
-              background: '#1a1b26', color: '#c8ccee', padding: '20px 24px',
-              fontSize: '0.78rem', lineHeight: 1.65, margin: 0, overflowX: 'auto',
-              fontFamily: "'JetBrains Mono', monospace",
-            }}>
-              <code>{s.code}</code>
-            </pre>
-          </motion.div>
+            <HighlightedCode code={s.code} lang={s.lang} />
+          </div>
         ))}
       </div>
     </section>
diff --git a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
index bde5c9dbe..335c0c72d 100644
--- a/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
+++ b/apps/website/src/components/landing/render/RenderCodeShowcase.tsx
@@ -1,7 +1,5 @@
-// apps/website/src/components/landing/render/RenderCodeShowcase.tsx
-'use client';
-import { motion } from 'framer-motion';
 import { tokens } from '@cacheplane/design-tokens';
+import { HighlightedCode } from '../HighlightedCode';
 
 const SNIPPET_1 = `import { defineAngularRegistry } from '@cacheplane/render';
 import { TableComponent } from './table.component';
@@ -19,16 +17,15 @@ const SNIPPET_2 = `<render-spec
   [state]="stateStore"
 />`;
 
-export function RenderCodeShowcase() {
+const SNIPPETS = [
+  { title: 'Registry Setup', code: SNIPPET_1, lang: 'typescript' },
+  { title: 'Template Binding', code: SNIPPET_2, lang: 'html' },
+];
+
+export async function RenderCodeShowcase() {
   return (
     <section style={{ padding: '80px 32px' }}>
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5 }}
-        style={{ textAlign: 'center', marginBottom: 48 }}
-      >
+      <div style={{ textAlign: 'center', marginBottom: 48 }}>
         <p style={{
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
           fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.12em',
@@ -43,19 +40,15 @@ export function RenderCodeShowcase() {
         }}>
           Generative UI in a few lines
         </h2>
-      </motion.div>
+      </div>
 
       <div style={{
         maxWidth: 900, margin: '0 auto',
         display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(380px, 100%), 1fr))', gap: 24,
       }}>
-        {[{ title: 'Registry Setup', code: SNIPPET_1 }, { title: 'Template Binding', code: SNIPPET_2 }].map((s, i) => (
-          <motion.div
+        {SNIPPETS.map((s) => (
+          <div
             key={s.title}
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.45, delay: i * 0.1 }}
             style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${tokens.glass.border}` }}
           >
             <div style={{
@@ -69,14 +62,8 @@ export function RenderCodeShowcase() {
                 {s.title}
               </span>
             </div>
-            <pre style={{
-              background: '#1a1b26', color: '#c8ccee', padding: '20px 24px',
-              fontSize: '0.78rem', lineHeight: 1.65, margin: 0, overflowX: 'auto',
-              fontFamily: "'JetBrains Mono', monospace",
-            }}>
-              <code>{s.code}</code>
-            </pre>
-          </motion.div>
+            <HighlightedCode code={s.code} lang={s.lang} />
+          </div>
         ))}
       </div>
     </section>