@strategicnerds/slide-nerds 0.1.0

package/templates/next-app/app/globals.css.tmpl

@@ -0,0 +1,274 @@
+@import 'tailwindcss';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+  background: var(--color-background);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Slide engine */
+[data-slide] {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+[data-slide].active {
+  display: flex;
+}
+
+[data-slide] > * {
+  min-height: 100%;
+  width: 100%;
+}
+
+[data-notes] {
+  display: none;
+}
+
+/* ==========================================================================
+   STEP ANIMATIONS (click-to-reveal, controlled by runtime)
+   Add these classes to data-step elements. Runtime adds step-visible on click.
+   ========================================================================== */
+
+[data-step], [data-auto-step] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+[data-step].step-fade, [data-auto-step].step-fade {
+  transition:
+    opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-step].step-move-up, [data-auto-step].step-move-up {
+  transform: translateY(24px);
+  transition:
+    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-step].step-scale-in, [data-auto-step].step-scale-in {
+  transform: scale(0.92);
+  transition:
+    opacity 350ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
+    visibility 350ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-step].step-move-left, [data-auto-step].step-move-left {
+  transform: translateX(-30px);
+  transition:
+    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-step].step-pop, [data-auto-step].step-pop {
+  transform: scale(0.6);
+  transition:
+    opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    visibility 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+[data-step].step-wipe-right, [data-auto-step].step-wipe-right {
+  clip-path: inset(0 100% 0 0);
+  transition:
+    clip-path 500ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Visible state applied by runtime */
+.step-visible {
+  visibility: visible !important;
+  opacity: 1 !important;
+  transform: translateY(0) translateX(0) scale(1) !important;
+}
+
+.step-wipe-right.step-visible {
+  clip-path: inset(0 0 0 0) !important;
+}
+
+/* Emphasis entrance for big stats */
+.step-emphasis.step-visible {
+  animation: emphasis-land 500ms cubic-bezier(0.16, 1, 0.3, 1) 1;
+}
+
+@keyframes emphasis-land {
+  0% { transform: scale(0.85); opacity: 0; }
+  60% { transform: scale(1.03); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+/* ==========================================================================
+   AUTO-BUILD ANIMATIONS (trigger on slide load, no click needed)
+   Add these classes directly to elements. They animate when the parent
+   slide gets the .active class. Use style={{ animationDelay }} for stagger.
+   ========================================================================== */
+
+.auto-fade {
+  opacity: 0;
+}
+
+[data-slide].active .auto-fade {
+  animation: auto-fade-in 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes auto-fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.auto-pop {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+[data-slide].active .auto-pop {
+  animation: pop-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@keyframes pop-in {
+  0% { transform: scale(0.6); opacity: 0; }
+  70% { transform: scale(1.08); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.auto-wipe-right {
+  clip-path: inset(0 100% 0 0);
+  opacity: 0;
+}
+
+[data-slide].active .auto-wipe-right {
+  animation: wipe-right-in 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes wipe-right-in {
+  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
+  1% { opacity: 1; }
+  100% { clip-path: inset(0 0 0 0); opacity: 1; }
+}
+
+.auto-slide-down {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+[data-slide].active .auto-slide-down {
+  animation: slide-down-in 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slide-down-in {
+  0% { transform: translateY(-30px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+.auto-slide-up {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+[data-slide].active .auto-slide-up {
+  animation: slide-up-in 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slide-up-in {
+  0% { transform: translateY(30px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+/* ==========================================================================
+   EXIT ANIMATIONS (trigger when leaving a slide)
+   Add these classes to elements. They animate when the parent slide gets
+   the .exiting class (added by runtime before slide transition).
+   Author-controlled exits use data-exit-step + exit-visible class.
+   ========================================================================== */
+
+[data-exit-step] {
+  /* Exit steps are visible by default, hidden when exit-visible is applied */
+}
+
+.exit-fade {
+  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-slide].exiting .exit-fade {
+  opacity: 0;
+}
+
+.exit-scale-out {
+  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-slide].exiting .exit-scale-out {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.exit-slide-up {
+  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-slide].exiting .exit-slide-up {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.exit-slide-down {
+  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-slide].exiting .exit-slide-down {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.exit-wipe-left {
+  transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-slide].exiting .exit-wipe-left {
+  clip-path: inset(0 0 0 100%);
+  opacity: 0;
+}
+
+/* Author-controlled exit steps: runtime adds exit-visible to trigger */
+[data-exit-step].exit-visible {
+  opacity: 0 !important;
+  transform: scale(0.95) !important;
+  transition: opacity 300ms ease, transform 300ms ease;
+}
+
+/* ==========================================================================
+   BRAND LOGO WATERMARK
+   Place a small logo in the corner of each slide.
+   ========================================================================== */
+
+.slide-logo {
+  position: absolute;
+  bottom: 1.75rem;
+  right: 2rem;
+  z-index: 10;
+  opacity: 0.25;
+  pointer-events: none;
+}

package/templates/next-app/app/layout.tsx.tmpl

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next'
+import { SlideRuntime } from '@strategicnerds/slide-nerds'
+import brandConfig from '../brand.config'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'A presentation built with slidenerds',
+}
+
+const brandVars = {
+  '--color-primary': brandConfig.colors.primary,
+  '--color-accent': brandConfig.colors.accent,
+  '--color-background': brandConfig.colors.background,
+  '--color-surface': brandConfig.colors.surface,
+  '--color-text': brandConfig.colors.text,
+  '--slide-padding': brandConfig.spacing.slide,
+  '--font-heading': brandConfig.fonts.heading,
+  '--font-body': brandConfig.fonts.body,
+  '--font-mono': brandConfig.fonts.mono,
+} as React.CSSProperties
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" style={brandVars}>
+      <body>
+        <SlideRuntime>{children}</SlideRuntime>
+      </body>
+    </html>
+  )
+}

package/templates/next-app/app/page.tsx.tmpl

@@ -0,0 +1,38 @@
+export default function Home() {
+  return (
+    <main>
+      <section data-slide="">
+        <div style={{ padding: 'var(--slide-padding, 4rem)' }}>
+          <h1 style={{ fontSize: '3rem', fontWeight: 700 }}>{{PROJECT_NAME}}</h1>
+          <p style={{ fontSize: '1.25rem', marginTop: '1rem', opacity: 0.7 }}>
+            A presentation built with slidenerds
+          </p>
+        </div>
+      </section>
+
+      <section data-slide="">
+        <div style={{ padding: 'var(--slide-padding, 4rem)' }}>
+          <h2 style={{ fontSize: '2rem', fontWeight: 600 }}>Getting started</h2>
+          <ul style={{ marginTop: '1rem', fontSize: '1.125rem', lineHeight: 2 }}>
+            <li data-step="">Open another terminal and start talking to Claude Code</li>
+            <li data-step="">Use arrow keys or space to navigate</li>
+            <li data-step="">Press P for presenter mode, L for light table</li>
+          </ul>
+          <div data-notes="">
+            This slide demonstrates the data-step progressive reveal convention.
+            Each bullet appears on click or keypress.
+          </div>
+        </div>
+      </section>
+
+      <section data-slide="">
+        <div style={{ padding: 'var(--slide-padding, 4rem)', textAlign: 'center' }}>
+          <p style={{ fontSize: '4rem', fontWeight: 700 }}>42</p>
+          <p style={{ fontSize: '1.25rem', marginTop: '0.5rem', opacity: 0.7 }}>
+            Big stat slide example
+          </p>
+        </div>
+      </section>
+    </main>
+  )
+}

package/templates/next-app/brand.config.ts.tmpl

@@ -0,0 +1,32 @@
+import type { BrandConfig } from '@strategicnerds/slide-nerds'
+
+/**
+ * Brand configuration for {{PROJECT_NAME}}.
+ *
+ * Change these values to match your brand. The layout template reads
+ * these and injects them as CSS custom properties on the <html> element,
+ * so every slide automatically picks up your palette, fonts, and spacing.
+ */
+export default {
+  colors: {
+    primary: '#0d0d0f',
+    accent: '#f59e0b',
+    background: '#111114',
+    surface: '#1a1a1f',
+    text: '#e8e6e3',
+  },
+  fonts: {
+    heading: 'system-ui, -apple-system, sans-serif',
+    body: 'system-ui, -apple-system, sans-serif',
+    mono: 'ui-monospace, monospace',
+  },
+  spacing: {
+    slide: '5rem',
+    section: '2rem',
+    element: '1rem',
+  },
+  // logo: {
+  //   src: '/logo.svg',   // Path to your brand logo in public/
+  //   height: 28,          // Height in pixels for the slide watermark
+  // },
+} satisfies BrandConfig

package/templates/next-app/package.json.tmpl

@@ -0,0 +1,25 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@strategicnerds/slide-nerds": "^0.1.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/templates/next-app/postcss.config.mjs.tmpl

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config

package/templates/next-app/tsconfig.json.tmpl

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}