create-pellicule 0.0.1

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "create-pellicule",
+  "version": "0.0.1",
+  "description": "Scaffold a new Pellicule video project",
+  "type": "module",
+  "bin": {
+    "create-pellicule": "./src/index.js"
+  },
+  "keywords": [
+    "vue",
+    "video",
+    "rendering",
+    "pellicule",
+    "create",
+    "scaffold"
+  ],
+  "author": "Kelvin Omereshone <kelvin@sailscasts.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.js

@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+
+import { parseArgs } from 'node:util'
+import { resolve, join, dirname } from 'node:path'
+import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const pkg = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), 'utf-8'))
+const VERSION = pkg.version
+
+// ANSI colors
+const colors = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  pellicule: '\x1b[38;2;66;184;131m',
+  bgPellicule: '\x1b[48;2;66;184;131m'
+}
+
+const c = {
+  error: (s) => `${colors.red}${s}${colors.reset}`,
+  info: (s) => `${colors.cyan}${s}${colors.reset}`,
+  dim: (s) => `${colors.dim}${s}${colors.reset}`,
+  bold: (s) => `${colors.bold}${s}${colors.reset}`,
+  highlight: (s) => `${colors.pellicule}${s}${colors.reset}`,
+  brand: (s) => `${colors.bgPellicule}${colors.white}${colors.bold}${s}${colors.reset}`
+}
+
+const HELP = `
+${c.bold('create-pellicule')} ${c.dim(`v${VERSION}`)} - Scaffold a new Pellicule project
+
+${c.bold('USAGE')}
+  ${c.highlight('npm create pellicule')}              ${c.dim('→ create in current directory')}
+  ${c.highlight('npm create pellicule')} <name>       ${c.dim('→ create in new directory')}
+
+${c.bold('OPTIONS')}
+  ${c.info('--help')}     Show this help message
+  ${c.info('--version')}  Show version number
+
+${c.bold('EXAMPLES')}
+  ${c.dim('# Create in current directory')}
+  ${c.highlight('npm create pellicule')}
+
+  ${c.dim('# Create in a new directory')}
+  ${c.highlight('npm create pellicule')} my-video
+
+${c.dim('Documentation: https://docs.sailscasts.com/pellicule')}
+`
+
+function copyTemplate(templateDir, targetDir, projectName) {
+  const files = readdirSync(templateDir)
+
+  for (const file of files) {
+    const srcPath = join(templateDir, file)
+    const destPath = join(targetDir, file)
+    let content = readFileSync(srcPath, 'utf-8')
+
+    // Replace template variables
+    content = content.replace(/\{\{name\}\}/g, projectName)
+
+    writeFileSync(destPath, content)
+  }
+}
+
+async function main() {
+  const { values, positionals } = parseArgs({
+    allowPositionals: true,
+    options: {
+      help: { type: 'boolean' },
+      version: { type: 'boolean' }
+    }
+  })
+
+  if (values.help) {
+    console.log(HELP)
+    process.exit(0)
+  }
+
+  if (values.version) {
+    console.log(VERSION)
+    process.exit(0)
+  }
+
+  const projectName = positionals[0] || '.'
+  const targetDir = resolve(projectName)
+  const isCurrentDir = projectName === '.'
+
+  console.log()
+  console.log(`  ${c.brand(' PELLICULE ')} ${c.dim('Create')}`)
+  console.log()
+
+  // Check if directory exists and has files
+  if (existsSync(targetDir)) {
+    const files = readdirSync(targetDir)
+    const hasFiles = files.filter(f => !f.startsWith('.')).length > 0
+    if (hasFiles && !isCurrentDir) {
+      console.error(c.error(`  Error: Directory "${projectName}" already exists and is not empty.\n`))
+      process.exit(1)
+    }
+  } else {
+    mkdirSync(targetDir, { recursive: true })
+  }
+
+  // Copy template files
+  const templateDir = resolve(__dirname, '../template')
+  const displayName = isCurrentDir ? 'current directory' : projectName
+
+  console.log(`  ${c.highlight('Scaffolding project')} in ${c.info(displayName)}...`)
+  console.log()
+
+  copyTemplate(templateDir, targetDir, isCurrentDir ? 'my-pellicule-video' : projectName)
+
+  // Success message
+  console.log(`  ${c.highlight('Done!')} Created Pellicule project.`)
+  console.log()
+  console.log(`  ${c.bold('Next steps:')}`)
+  console.log()
+  if (!isCurrentDir) {
+    console.log(`  ${c.dim('1.')} cd ${projectName}`)
+    console.log(`  ${c.dim('2.')} npm install`)
+    console.log(`  ${c.dim('3.')} npx pellicule`)
+  } else {
+    console.log(`  ${c.dim('1.')} npm install`)
+    console.log(`  ${c.dim('2.')} npx pellicule`)
+  }
+  console.log()
+  console.log(`  ${c.dim('Documentation:')} https://docs.sailscasts.com/pellicule`)
+  console.log()
+}
+
+main().catch((error) => {
+  console.error(c.error(`\nError: ${error.message}\n`))
+  process.exit(1)
+})

package/template/Video.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed } from 'vue'
+import { useFrame, useVideoConfig, interpolate, Easing } from 'pellicule'
+
+const frame = useFrame()
+const { width, height, fps, durationInFrames } = useVideoConfig()
+
+// Animation: fade in and scale up
+const opacity = computed(() =>
+  interpolate(frame.value, [0, 30], [0, 1])
+)
+
+const scale = computed(() =>
+  interpolate(frame.value, [0, 30], [0.8, 1], { easing: Easing.easeOut })
+)
+
+// Animation: slide up the subtitle
+const subtitleY = computed(() =>
+  interpolate(frame.value, [20, 50], [40, 0], { easing: Easing.easeOut })
+)
+
+const subtitleOpacity = computed(() =>
+  interpolate(frame.value, [20, 50], [0, 1])
+)
+</script>
+
+<template>
+  <div class="video">
+    <!-- Main content -->
+    <div
+      class="content"
+      :style="{
+        opacity,
+        transform: `scale(${scale})`
+      }"
+    >
+      <h1 class="title">Hello, Pellicule!</h1>
+
+      <p
+        class="subtitle"
+        :style="{
+          opacity: subtitleOpacity,
+          transform: `translateY(${subtitleY}px)`
+        }"
+      >
+        Vue-native programmatic video
+      </p>
+    </div>
+
+    <!-- Frame counter (helpful for debugging) -->
+    <div class="frame-info">
+      Frame {{ frame }} / {{ durationInFrames }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.video {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: white;
+}
+
+.content {
+  text-align: center;
+}
+
+.title {
+  font-size: 72px;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(135deg, #42b883 0%, #6ee7a0 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  font-size: 32px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 20px;
+}
+
+.frame-info {
+  position: absolute;
+  bottom: 40px;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.3);
+  font-family: monospace;
+}
+</style>

package/template/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "render": "npx pellicule"
+  },
+  "dependencies": {
+    "pellicule": "^0.0.1",
+    "vue": "^3.4.0"
+  }
+}