@codellyson/framely-cli 0.1.0

package/studio/templates/LowerThird.jsx

@@ -0,0 +1,139 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from '@codellyson/framely';
+
+/**
+ * Clean Lower Third Template
+ */
+export function LowerThird({
+  name = 'John Doe',
+  title = 'CEO & Founder',
+  social = '@johndoe',
+  accentColor = '#3b82f6',
+}) {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+
+  // Entry animation
+  const entrySpring = spring({ frame, fps, config: { damping: 15, stiffness: 120 } });
+
+  // Line animation
+  const lineWidth = interpolate(frame, [0, 25], [0, 100], { extrapolateRight: 'clamp' });
+
+  // Text slide in
+  const nameX = interpolate(entrySpring, [0, 1], [-300, 0]);
+  const nameOpacity = interpolate(frame, [5, 20], [0, 1], { extrapolateRight: 'clamp' });
+
+  const titleX = interpolate(frame, [15, 35], [-200, 0], { extrapolateRight: 'clamp' });
+  const titleOpacity = interpolate(frame, [15, 30], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Exit animation
+  const exitStart = durationInFrames - 30;
+  const exitProgress = interpolate(frame, [exitStart, durationInFrames], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const exitX = interpolate(exitProgress, [0, 1], [0, -400]);
+  const exitOpacity = interpolate(exitProgress, [0, 0.5], [1, 0], { extrapolateRight: 'clamp' });
+
+  return (
+    <AbsoluteFill style={{ background: 'transparent' }}>
+      {/* Lower third container */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 80,
+          left: 60,
+          transform: `translateX(${exitX}px)`,
+          opacity: exitOpacity,
+        }}
+      >
+        {/* Background shape */}
+        <div
+          style={{
+            position: 'relative',
+            padding: '16px 24px',
+            background: 'rgba(0, 0, 0, 0.85)',
+            backdropFilter: 'blur(10px)',
+            borderRadius: 4,
+            borderLeft: `4px solid ${accentColor}`,
+          }}
+        >
+          {/* Accent line animation */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: `${lineWidth}%`,
+              height: 2,
+              background: `linear-gradient(90deg, ${accentColor}, transparent)`,
+            }}
+          />
+
+          {/* Name */}
+          <h2
+            style={{
+              margin: 0,
+              fontSize: 28,
+              fontWeight: 600,
+              color: '#fff',
+              transform: `translateX(${nameX}px)`,
+              opacity: nameOpacity,
+              letterSpacing: '0.02em',
+            }}
+          >
+            {name}
+          </h2>
+
+          {/* Title */}
+          <p
+            style={{
+              margin: '4px 0 0',
+              fontSize: 16,
+              fontWeight: 400,
+              color: accentColor,
+              transform: `translateX(${titleX}px)`,
+              opacity: titleOpacity,
+              textTransform: 'uppercase',
+              letterSpacing: '0.1em',
+            }}
+          >
+            {title}
+          </p>
+
+          {/* Social handle */}
+          {social && (
+            <p
+              style={{
+                margin: '8px 0 0',
+                fontSize: 14,
+                fontWeight: 400,
+                color: 'rgba(255, 255, 255, 0.6)',
+                transform: `translateX(${titleX}px)`,
+                opacity: titleOpacity * 0.8,
+              }}
+            >
+              {social}
+            </p>
+          )}
+        </div>
+
+        {/* Decorative element */}
+        <div
+          style={{
+            position: 'absolute',
+            right: -20,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 40,
+            height: 40,
+            border: `2px solid ${accentColor}`,
+            borderRadius: '50%',
+            opacity: interpolate(frame, [30, 45], [0, 0.5], { extrapolateRight: 'clamp' }),
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+export default LowerThird;

package/studio/templates/ProductShowcase.jsx

@@ -0,0 +1,162 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from '@codellyson/framely';
+
+/**
+ * Product Showcase Template
+ */
+export function ProductShowcase({
+  productName = 'Product Name',
+  tagline = 'Amazing features await',
+  price = '$99.99',
+  ctaText = 'Shop Now',
+  brandColor = '#10b981',
+}) {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+
+  // Product placeholder (circle representing product)
+  const productSpring = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });
+  const productScale = interpolate(productSpring, [0, 1], [0, 1]);
+  const productRotate = interpolate(frame, [0, 180], [0, 360]);
+
+  // Text animations
+  const nameY = interpolate(frame, [30, 50], [50, 0], { extrapolateRight: 'clamp' });
+  const nameOpacity = interpolate(frame, [30, 45], [0, 1], { extrapolateRight: 'clamp' });
+
+  const taglineY = interpolate(frame, [40, 60], [30, 0], { extrapolateRight: 'clamp' });
+  const taglineOpacity = interpolate(frame, [40, 55], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Price pop
+  const priceSpring = spring({ frame: frame - 70, fps, config: { damping: 10, stiffness: 200 } });
+  const priceScale = interpolate(priceSpring, [0, 1], [0, 1]);
+
+  // CTA button
+  const ctaSpring = spring({ frame: frame - 100, fps, config: { damping: 15, stiffness: 150 } });
+  const ctaScale = interpolate(ctaSpring, [0, 1], [0, 1]);
+  const ctaY = interpolate(ctaSpring, [0, 1], [30, 0]);
+
+  // Pulse effect on CTA
+  const ctaPulse = frame > 120 ? 1 + Math.sin((frame - 120) * 0.15) * 0.05 : 1;
+
+  // Decorative circles
+  const circles = [
+    { size: 300, delay: 0, x: '20%', y: '30%' },
+    { size: 200, delay: 10, x: '80%', y: '60%' },
+    { size: 150, delay: 20, x: '70%', y: '20%' },
+  ];
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, ${brandColor}22 100%)`,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Background circles */}
+      {circles.map((circle, i) => {
+        const circleScale = interpolate(frame - circle.delay, [0, 40], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        });
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: circle.x,
+              top: circle.y,
+              width: circle.size,
+              height: circle.size,
+              borderRadius: '50%',
+              border: `2px solid ${brandColor}33`,
+              transform: `translate(-50%, -50%) scale(${circleScale})`,
+            }}
+          />
+        );
+      })}
+
+      {/* Product placeholder */}
+      <div
+        style={{
+          width: Math.min(width, height) * 0.35,
+          height: Math.min(width, height) * 0.35,
+          borderRadius: '50%',
+          background: `linear-gradient(135deg, ${brandColor}, ${brandColor}88)`,
+          boxShadow: `0 20px 60px ${brandColor}44`,
+          transform: `scale(${productScale}) rotate(${productRotate}deg)`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: 30,
+        }}
+      >
+        <span style={{ fontSize: 60, filter: 'grayscale(1) brightness(10)' }}>📦</span>
+      </div>
+
+      {/* Product name */}
+      <h1
+        style={{
+          fontSize: Math.min(width, height) * 0.07,
+          fontWeight: 700,
+          color: '#fff',
+          margin: 0,
+          transform: `translateY(${nameY}px)`,
+          opacity: nameOpacity,
+          textAlign: 'center',
+        }}
+      >
+        {productName}
+      </h1>
+
+      {/* Tagline */}
+      <p
+        style={{
+          fontSize: Math.min(width, height) * 0.035,
+          color: 'rgba(255, 255, 255, 0.7)',
+          margin: '10px 0 20px',
+          transform: `translateY(${taglineY}px)`,
+          opacity: taglineOpacity,
+          textAlign: 'center',
+        }}
+      >
+        {tagline}
+      </p>
+
+      {/* Price */}
+      <div
+        style={{
+          fontSize: Math.min(width, height) * 0.08,
+          fontWeight: 700,
+          color: brandColor,
+          transform: `scale(${priceScale})`,
+          marginBottom: 20,
+        }}
+      >
+        {price}
+      </div>
+
+      {/* CTA Button */}
+      <button
+        style={{
+          padding: '16px 40px',
+          fontSize: Math.min(width, height) * 0.035,
+          fontWeight: 600,
+          color: '#fff',
+          background: brandColor,
+          border: 'none',
+          borderRadius: 50,
+          transform: `scale(${ctaScale * ctaPulse}) translateY(${ctaY}px)`,
+          boxShadow: `0 10px 30px ${brandColor}66`,
+          cursor: 'pointer',
+        }}
+      >
+        {ctaText}
+      </button>
+    </AbsoluteFill>
+  );
+}
+
+export default ProductShowcase;

package/studio/templates/SlideTransition.jsx

@@ -0,0 +1,211 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from '@codellyson/framely';
+
+/**
+ * Slide Transition Template
+ * Smooth slide transitions for presentations
+ */
+export function SlideTransition({
+  transitionType = 'slide',
+  direction = 'left',
+  fromContent = 'Slide 1',
+  toContent = 'Slide 2',
+  backgroundColor = '#1a1a2e',
+  slideColor = '#16213e',
+  textColor = '#ffffff',
+}) {
+  const frame = useCurrentFrame();
+  const { fps, width, durationInFrames } = useVideoConfig();
+
+  const midpoint = durationInFrames / 2;
+  const progress = frame / durationInFrames;
+
+  // Transition animation
+  const transitionSpring = spring({
+    frame: frame - midpoint / 2,
+    fps,
+    config: { damping: 15, stiffness: 100 },
+  });
+
+  // Calculate slide positions based on transition type
+  const getTransform = (isOutgoing) => {
+    const springValue = isOutgoing ? transitionSpring : 1 - transitionSpring;
+
+    switch (transitionType) {
+      case 'slide': {
+        const slideOffset = interpolate(springValue, [0, 1], [0, 100]);
+        if (direction === 'left') {
+          return isOutgoing
+            ? `translateX(${-slideOffset}%)`
+            : `translateX(${100 - slideOffset}%)`;
+        } else if (direction === 'right') {
+          return isOutgoing
+            ? `translateX(${slideOffset}%)`
+            : `translateX(${-100 + slideOffset}%)`;
+        } else if (direction === 'up') {
+          return isOutgoing
+            ? `translateY(${-slideOffset}%)`
+            : `translateY(${100 - slideOffset}%)`;
+        } else {
+          return isOutgoing
+            ? `translateY(${slideOffset}%)`
+            : `translateY(${-100 + slideOffset}%)`;
+        }
+      }
+
+      case 'zoom': {
+        const zoomScale = isOutgoing
+          ? interpolate(springValue, [0, 1], [1, 0.5])
+          : interpolate(springValue, [0, 1], [1.5, 1]);
+        const zoomOpacity = isOutgoing
+          ? interpolate(springValue, [0, 1], [1, 0])
+          : interpolate(springValue, [0, 1], [0, 1]);
+        return { transform: `scale(${zoomScale})`, opacity: zoomOpacity };
+      }
+
+      case 'fade': {
+        const fadeOpacity = isOutgoing
+          ? interpolate(springValue, [0, 1], [1, 0])
+          : interpolate(springValue, [0, 1], [0, 1]);
+        return { opacity: fadeOpacity };
+      }
+
+      case 'flip': {
+        const flipRotation = isOutgoing
+          ? interpolate(springValue, [0, 1], [0, -90])
+          : interpolate(springValue, [0, 1], [90, 0]);
+        const flipOpacity = Math.abs(flipRotation) > 85 ? 0 : 1;
+        return {
+          transform: `perspective(1000px) rotateY(${flipRotation}deg)`,
+          opacity: flipOpacity,
+        };
+      }
+
+      default:
+        return {};
+    }
+  };
+
+  const outgoingTransform = getTransform(true);
+  const incomingTransform = getTransform(false);
+
+  // Slide content component
+  const SlideContent = ({ content, style }) => (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: slideColor,
+        ...(typeof style === 'string' ? { transform: style } : style),
+      }}
+    >
+      <div
+        style={{
+          fontSize: width * 0.06,
+          fontWeight: 700,
+          color: textColor,
+          textAlign: 'center',
+          padding: 40,
+        }}
+      >
+        {content}
+      </div>
+
+      {/* Decorative corners */}
+      {['top-left', 'top-right', 'bottom-left', 'bottom-right'].map((corner) => (
+        <div
+          key={corner}
+          style={{
+            position: 'absolute',
+            width: 60,
+            height: 60,
+            borderColor: textColor,
+            borderStyle: 'solid',
+            borderWidth: 0,
+            opacity: 0.3,
+            ...(corner.includes('top') ? { top: 40 } : { bottom: 40 }),
+            ...(corner.includes('left') ? { left: 40 } : { right: 40 }),
+            ...(corner.includes('top') && corner.includes('left') && {
+              borderTopWidth: 3,
+              borderLeftWidth: 3,
+            }),
+            ...(corner.includes('top') && corner.includes('right') && {
+              borderTopWidth: 3,
+              borderRightWidth: 3,
+            }),
+            ...(corner.includes('bottom') && corner.includes('left') && {
+              borderBottomWidth: 3,
+              borderLeftWidth: 3,
+            }),
+            ...(corner.includes('bottom') && corner.includes('right') && {
+              borderBottomWidth: 3,
+              borderRightWidth: 3,
+            }),
+          }}
+        />
+      ))}
+    </div>
+  );
+
+  // Progress indicator
+  const progressWidth = interpolate(progress, [0, 1], [0, 100]);
+
+  return (
+    <AbsoluteFill style={{ background: backgroundColor, overflow: 'hidden' }}>
+      {/* Outgoing slide */}
+      <SlideContent
+        content={fromContent}
+        style={typeof outgoingTransform === 'string' ? outgoingTransform : outgoingTransform}
+        isActive={frame < midpoint}
+      />
+
+      {/* Incoming slide */}
+      <SlideContent
+        content={toContent}
+        style={typeof incomingTransform === 'string' ? incomingTransform : incomingTransform}
+        isActive={frame >= midpoint}
+      />
+
+      {/* Progress bar at bottom */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 4,
+          background: 'rgba(255,255,255,0.1)',
+        }}
+      >
+        <div
+          style={{
+            width: `${progressWidth}%`,
+            height: '100%',
+            background: textColor,
+            opacity: 0.5,
+          }}
+        />
+      </div>
+
+      {/* Transition type label */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 20,
+          right: 20,
+          fontSize: 14,
+          color: textColor,
+          opacity: 0.5,
+          fontFamily: 'monospace',
+          textTransform: 'uppercase',
+        }}
+      >
+        {transitionType} • {direction}
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+export default SlideTransition;

package/studio/templates/SocialIntro.jsx

@@ -0,0 +1,122 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from '@codellyson/framely';
+
+/**
+ * Modern Social Intro Template
+ * Clean intro animation for social media videos
+ */
+export function SocialIntro({
+  title = 'Your Title Here',
+  subtitle = 'Subtitle text',
+  accentColor = '#6366f1',
+}) {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+
+  // Background gradient animation
+  const gradientProgress = interpolate(frame, [0, 60], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Title animation
+  const titleSpring = spring({ frame, fps, config: { damping: 15, stiffness: 100 } });
+  const titleY = interpolate(titleSpring, [0, 1], [100, 0]);
+  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Subtitle animation (delayed)
+  const subtitleSpring = spring({ frame: frame - 15, fps, config: { damping: 15, stiffness: 100 } });
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [50, 0]);
+  const subtitleOpacity = interpolate(frame, [15, 35], [0, 1], { extrapolateRight: 'clamp' });
+
+  // Accent line animation
+  const lineWidth = interpolate(frame, [30, 60], [0, 200], { extrapolateRight: 'clamp' });
+
+  // Exit animation
+  const exitProgress = interpolate(frame, [70, 90], [0, 1], { extrapolateRight: 'clamp' });
+  const scale = interpolate(exitProgress, [0, 1], [1, 0.8]);
+  const overallOpacity = interpolate(exitProgress, [0, 1], [1, 0]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `linear-gradient(135deg, #0a0a0f ${gradientProgress * 30}%, ${accentColor}22 100%)`,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transform: `scale(${scale})`,
+        opacity: overallOpacity,
+      }}
+    >
+      {/* Background particles */}
+      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+        {[...Array(20)].map((_, i) => {
+          const delay = i * 3;
+          const particleY = interpolate(
+            frame - delay,
+            [0, 90],
+            [height + 50, -50],
+            { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
+          );
+          const particleX = (i * 97) % width;
+          const size = 4 + (i % 3) * 2;
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: particleX,
+                top: particleY,
+                width: size,
+                height: size,
+                borderRadius: '50%',
+                background: accentColor,
+                opacity: 0.3,
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div style={{ textAlign: 'center', zIndex: 1 }}>
+        <h1
+          style={{
+            fontSize: Math.min(width, height) * 0.08,
+            fontWeight: 700,
+            color: '#fff',
+            margin: 0,
+            transform: `translateY(${titleY}px)`,
+            opacity: titleOpacity,
+            textShadow: `0 4px 30px ${accentColor}66`,
+          }}
+        >
+          {title}
+        </h1>
+
+        {/* Accent line */}
+        <div
+          style={{
+            width: lineWidth,
+            height: 4,
+            background: `linear-gradient(90deg, transparent, ${accentColor}, transparent)`,
+            margin: '20px auto',
+            borderRadius: 2,
+          }}
+        />
+
+        <p
+          style={{
+            fontSize: Math.min(width, height) * 0.035,
+            fontWeight: 400,
+            color: 'rgba(255, 255, 255, 0.7)',
+            margin: 0,
+            transform: `translateY(${subtitleY}px)`,
+            opacity: subtitleOpacity,
+          }}
+        >
+          {subtitle}
+        </p>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+export default SocialIntro;