@codellyson/framely-cli 0.1.0

package/studio/styles/dialogs.css

@@ -0,0 +1,420 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Dialog Styles — Shared by RenderDialog & ExportDialog
+   Uses design system tokens from design-system.css
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Overlay ─── */
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  font-family: var(--font-sans);
+  animation: dialog-fade-in var(--transition-fast) ease-out;
+}
+
+@keyframes dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dialog-slide-up {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ─── Panel ─── */
+.dialog-panel {
+  background: var(--zinc-900);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  animation: dialog-slide-up var(--transition-base) ease-out;
+}
+
+/* ─── Header ─── */
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.dialog-title {
+  margin: 0;
+  color: var(--zinc-100);
+  font-size: var(--text-lg);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.dialog-close-btn {
+  background: none;
+  border: none;
+  color: var(--zinc-500);
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.dialog-close-btn:hover {
+  color: var(--zinc-300);
+}
+
+.dialog-close-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* ─── Body ─── */
+.dialog-body {
+  padding: var(--space-5);
+}
+
+/* ─── Footer ─── */
+.dialog-footer {
+  padding: var(--space-3) var(--space-5);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
+}
+
+/* ─── Sections ─── */
+.dialog-section {
+  margin-bottom: var(--space-4);
+}
+
+.dialog-section:last-child {
+  margin-bottom: 0;
+}
+
+.dialog-label {
+  display: block;
+  color: var(--zinc-400);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-2);
+}
+
+/* ─── Info Card ─── */
+.dialog-info-card {
+  padding: var(--space-3);
+  background: var(--zinc-800);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-5);
+}
+
+.dialog-info-card-title {
+  color: var(--zinc-100);
+  font-weight: 500;
+  margin-bottom: var(--space-1);
+  font-size: var(--text-sm);
+}
+
+.dialog-info-card-subtitle {
+  color: var(--zinc-500);
+  font-size: var(--text-xs);
+}
+
+/* ─── Code Area (textarea / input) ─── */
+.dialog-code {
+  width: 100%;
+  padding: var(--space-3);
+  background: var(--zinc-800);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-lg);
+  color: var(--zinc-200);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.dialog-code:focus {
+  border-color: var(--indigo-500);
+}
+
+/* ─── Option Grid (codec / quality selectors) ─── */
+.dialog-option-grid {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.dialog-option-grid--3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.dialog-option-grid--4col {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.dialog-option-btn {
+  padding: var(--space-2);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-md);
+  color: var(--zinc-300);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  cursor: pointer;
+  text-align: center;
+  transition: all var(--transition-fast);
+}
+
+.dialog-option-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.dialog-option-btn.active {
+  background: linear-gradient(135deg, var(--indigo-500), var(--purple-600));
+  border-color: transparent;
+  color: white;
+  font-weight: 500;
+}
+
+.dialog-option-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dialog-option-hint {
+  color: var(--zinc-600);
+  font-size: var(--text-xs);
+  margin-top: var(--space-1);
+}
+
+/* ─── Inputs ─── */
+.dialog-input {
+  padding: var(--space-2);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-md);
+  color: var(--zinc-100);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.dialog-input:focus {
+  border-color: var(--indigo-500);
+}
+
+.dialog-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Range input */
+.dialog-range {
+  width: 100%;
+  accent-color: var(--indigo-500);
+}
+
+.dialog-range-labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--zinc-600);
+  font-size: var(--text-xs);
+}
+
+/* Frame range row */
+.dialog-frame-range {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.dialog-frame-range .dialog-input {
+  flex: 1;
+}
+
+.dialog-frame-range-sep {
+  color: var(--zinc-600);
+  font-size: var(--text-sm);
+}
+
+/* Checkbox options */
+.dialog-checkbox-group {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.dialog-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--zinc-400);
+  font-size: var(--text-xs);
+  cursor: pointer;
+}
+
+.dialog-checkbox-label input[type="checkbox"] {
+  accent-color: var(--indigo-500);
+}
+
+/* ─── Alerts ─── */
+.dialog-alert {
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-xs);
+  margin-bottom: var(--space-4);
+  border: 1px solid;
+}
+
+.dialog-alert--error {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--error);
+}
+
+.dialog-alert--success {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+
+.dialog-alert-title {
+  color: var(--success);
+  font-weight: 500;
+  margin-bottom: var(--space-1);
+}
+
+.dialog-alert-subtitle {
+  color: var(--zinc-500);
+  font-size: var(--text-xs);
+}
+
+.dialog-alert-link {
+  display: inline-block;
+  margin-top: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--success);
+  border-radius: var(--radius-sm);
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  text-decoration: none;
+  transition: filter var(--transition-fast);
+}
+
+.dialog-alert-link:hover {
+  filter: brightness(1.1);
+  color: white;
+}
+
+/* ─── Progress Bar ─── */
+.dialog-progress {
+  margin-bottom: var(--space-4);
+}
+
+.dialog-progress-track {
+  height: 4px;
+  background: var(--zinc-800);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.dialog-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--indigo-500), var(--purple-500));
+  transition: width var(--transition-base);
+  border-radius: var(--radius-full);
+}
+
+.dialog-progress-text {
+  color: var(--zinc-500);
+  font-size: var(--text-xs);
+  text-align: center;
+  margin-top: var(--space-1);
+}
+
+/* ─── Buttons ─── */
+.dialog-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  line-height: 1;
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.dialog-btn--primary {
+  background: linear-gradient(135deg, var(--indigo-500), var(--purple-600));
+  color: white;
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-lg);
+}
+
+.dialog-btn--primary:hover:not(:disabled) {
+  filter: brightness(1.1);
+  box-shadow: 0 0 20px -5px var(--indigo-500);
+}
+
+.dialog-btn--primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.dialog-btn--secondary {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--zinc-100);
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-lg);
+}
+
+.dialog-btn--secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dialog-btn--secondary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.dialog-btn--subtle {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--zinc-300);
+}
+
+.dialog-btn--subtle:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.dialog-btn--success {
+  background: var(--success);
+  color: white;
+}
+
+.dialog-btn-row {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}

package/studio/templates/AnimatedGradient.jsx

@@ -0,0 +1,99 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from '@codellyson/framely';
+
+/**
+ * Animated Gradient Background Template
+ */
+export function AnimatedGradient({
+  colors = ['#6366f1', '#8b5cf6', '#d946ef'],
+  speed = 1,
+  angle = 45,
+}) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Continuous animation that loops
+  const progress = (frame * speed) / fps;
+
+  // Create flowing gradient effect
+  const gradientAngle = angle + Math.sin(progress * 0.5) * 30;
+
+  // Color positions shift over time
+  const shift1 = (Math.sin(progress * 0.8) + 1) * 25;
+  const shift2 = 50 + Math.sin(progress * 0.6) * 20;
+  const shift3 = 100 - (Math.cos(progress * 0.7) + 1) * 15;
+
+  // Build gradient string
+  const gradient = `linear-gradient(${gradientAngle}deg,
+    ${colors[0]} ${shift1}%,
+    ${colors[1] || colors[0]} ${shift2}%,
+    ${colors[2] || colors[1] || colors[0]} ${shift3}%
+  )`;
+
+  // Overlay orbs
+  const orbs = colors.map((color, i) => {
+    const orbProgress = progress + i * 2;
+    const x = 50 + Math.sin(orbProgress * 0.3 + i) * 40;
+    const y = 50 + Math.cos(orbProgress * 0.4 + i * 0.5) * 40;
+    const scale = 0.8 + Math.sin(orbProgress * 0.5) * 0.3;
+
+    return {
+      color,
+      x,
+      y,
+      scale,
+    };
+  });
+
+  return (
+    <AbsoluteFill style={{ background: '#000', overflow: 'hidden' }}>
+      {/* Main gradient */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: -100,
+          background: gradient,
+          filter: 'blur(0px)',
+        }}
+      />
+
+      {/* Animated orbs */}
+      {orbs.map((orb, i) => (
+        <div
+          key={i}
+          style={{
+            position: 'absolute',
+            left: `${orb.x}%`,
+            top: `${orb.y}%`,
+            width: '60%',
+            height: '60%',
+            background: `radial-gradient(circle, ${orb.color}66 0%, transparent 70%)`,
+            transform: `translate(-50%, -50%) scale(${orb.scale})`,
+            filter: 'blur(60px)',
+          }}
+        />
+      ))}
+
+      {/* Noise overlay for texture */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+          opacity: 0.05,
+          mixBlendMode: 'overlay',
+        }}
+      />
+
+      {/* Vignette */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%)',
+        }}
+      />
+    </AbsoluteFill>
+  );
+}
+
+export default AnimatedGradient;

package/studio/templates/InstagramStory.jsx

@@ -0,0 +1,172 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from '@codellyson/framely';
+
+/**
+ * Instagram Story Template
+ */
+export function InstagramStory({
+  headline = 'New Post!',
+  description = 'Check out our latest update',
+  backgroundColor = '#f472b6',
+  textColor = '#ffffff',
+}) {
+  const frame = useCurrentFrame();
+  const { fps, width } = useVideoConfig();
+
+  // Background pulse
+  const bgPulse = 1 + Math.sin(frame * 0.1) * 0.02;
+
+  // Sticker animations
+  const stickers = [
+    { emoji: '✨', x: '15%', y: '20%', delay: 0, scale: 1.2 },
+    { emoji: '🔥', x: '85%', y: '25%', delay: 5, scale: 1.0 },
+    { emoji: '💫', x: '20%', y: '75%', delay: 10, scale: 0.9 },
+    { emoji: '⭐', x: '80%', y: '70%', delay: 15, scale: 1.1 },
+    { emoji: '💖', x: '50%', y: '15%', delay: 8, scale: 1.0 },
+  ];
+
+  // Headline animation
+  const headlineSpring = spring({ frame, fps, config: { damping: 12, stiffness: 150 } });
+  const headlineScale = interpolate(headlineSpring, [0, 1], [0, 1]);
+  const headlineRotate = interpolate(headlineSpring, [0, 1], [-10, 0]);
+
+  // Description animation
+  const descY = interpolate(frame, [20, 40], [30, 0], { extrapolateRight: 'clamp' });
+  const descOpacity = interpolate(frame, [20, 35], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Swipe up indicator
+  const swipeY = interpolate(
+    frame % 60,
+    [0, 30, 60],
+    [0, -15, 0]
+  );
+  const swipeOpacity = interpolate(frame, [60, 80], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Background gradient shift
+  const gradientAngle = 135 + Math.sin(frame * 0.05) * 20;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `linear-gradient(${gradientAngle}deg, ${backgroundColor}, ${backgroundColor}cc, ${backgroundColor}99)`,
+        transform: `scale(${bgPulse})`,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Animated circles background */}
+      {[...Array(6)].map((_, i) => {
+        const circleProgress = ((frame + i * 20) % 120) / 120;
+        const circleScale = interpolate(circleProgress, [0, 0.5, 1], [0, 1.5, 0]);
+        const circleOpacity = interpolate(circleProgress, [0, 0.3, 0.7, 1], [0, 0.3, 0.3, 0]);
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '50%',
+              width: width * 0.8,
+              height: width * 0.8,
+              borderRadius: '50%',
+              border: `3px solid ${textColor}`,
+              transform: `translate(-50%, -50%) scale(${circleScale})`,
+              opacity: circleOpacity,
+            }}
+          />
+        );
+      })}
+
+      {/* Stickers */}
+      {stickers.map((sticker, i) => {
+        const stickerSpring = spring({
+          frame: frame - sticker.delay,
+          fps,
+          config: { damping: 10, stiffness: 200 },
+        });
+        const stickerScale = interpolate(stickerSpring, [0, 1], [0, sticker.scale]);
+        const stickerRotate = Math.sin((frame + i * 10) * 0.1) * 15;
+        const stickerY = Math.sin((frame + i * 5) * 0.08) * 10;
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: sticker.x,
+              top: sticker.y,
+              fontSize: width * 0.08,
+              transform: `translate(-50%, -50%) scale(${stickerScale}) rotate(${stickerRotate}deg) translateY(${stickerY}px)`,
+            }}
+          >
+            {sticker.emoji}
+          </div>
+        );
+      })}
+
+      {/* Content card */}
+      <div
+        style={{
+          background: 'rgba(255, 255, 255, 0.15)',
+          backdropFilter: 'blur(20px)',
+          borderRadius: 30,
+          padding: '40px 50px',
+          textAlign: 'center',
+          border: '2px solid rgba(255, 255, 255, 0.2)',
+        }}
+      >
+        {/* Headline */}
+        <h1
+          style={{
+            fontSize: width * 0.08,
+            fontWeight: 800,
+            color: textColor,
+            margin: 0,
+            transform: `scale(${headlineScale}) rotate(${headlineRotate}deg)`,
+            textShadow: '0 4px 20px rgba(0,0,0,0.2)',
+          }}
+        >
+          {headline}
+        </h1>
+
+        {/* Description */}
+        <p
+          style={{
+            fontSize: width * 0.04,
+            color: textColor,
+            margin: '15px 0 0',
+            opacity: descOpacity,
+            transform: `translateY(${descY}px)`,
+            fontWeight: 500,
+          }}
+        >
+          {description}
+        </p>
+      </div>
+
+      {/* Swipe up indicator */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 60,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          opacity: swipeOpacity,
+          transform: `translateY(${swipeY}px)`,
+        }}
+      >
+        <svg width="30" height="30" viewBox="0 0 24 24" fill={textColor}>
+          <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
+        </svg>
+        <span style={{ color: textColor, fontSize: 14, fontWeight: 600, marginTop: 5 }}>
+          Swipe Up
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+export default InstagramStory;