@lovett/ui 0.0.1

package/src/meta-previews/MetaReelPreview.tsx

@@ -0,0 +1,750 @@
+import React from 'react';
+import type { PreviewAdData, PreviewPlatform } from './types';
+import { CreativeMedia } from './CreativeMedia';
+import { ProfileAvatar } from './ProfileAvatar';
+
+interface MetaReelPreviewProps {
+  platform: PreviewPlatform;
+  adData: PreviewAdData;
+  dominantColor?: string | undefined;
+  accentColor?: string | undefined;
+}
+
+/**
+ * Facebook/Instagram Reels Preview
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Source: Facebook-Reels-singleimage-1080x1080.html extraction
+ * Container: 320x567px (9:16 ratio)
+ */
+export const MetaReelPreview: React.FC<MetaReelPreviewProps> = ({
+  platform,
+  adData,
+  dominantColor = 'rgb(40, 40, 40)',
+}) => {
+
+  // Instagram animation states
+  const [instagramFrame, setInstagramFrame] = React.useState<'transparent' | 'solid' | 'expanded'>('transparent');
+
+  // Facebook Reels exact design tokens - extracted from Creative Hub
+  const reels = {
+    // Container - 320x567px (9:16 ratio)
+    containerWidth: 320,
+    containerHeight: 567,
+    // FB Reels = solid black, IG Reels = dominant color gradient
+    containerBg: platform === 'instagram'
+      ? `linear-gradient(to bottom, ${dominantColor}, rgb(0, 0, 0))`
+      : 'linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))',
+    containerBorder: '1px solid rgba(0, 0, 0, 0.3)',
+    fontFamily: 'system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif',
+
+    // Image centered in black container
+    imageWidth: 318,
+    imageHeight: 318,
+    imageMarginTop: 123.5, // Centers in 565px height
+
+    // Sponsored pill (top left)
+    sponsoredPillTop: 10,
+    sponsoredPillLeft: 10,
+    sponsoredPillPadding: '4px 10px',
+    sponsoredPillBg: 'rgba(24, 25, 26, 0.6)',
+    sponsoredPillRadius: '50px',
+    sponsoredPillSize: 12,
+    sponsoredPillColor: 'rgb(255, 255, 255)',
+
+    // Profile section (bottom overlay)
+    profileTop: 422.922,
+    profileLeft: 16,
+    profileWidth: 250,
+
+    // Profile image
+    profileImageSize: 30,
+    profileImageRadius: '50px',
+
+    // Page name
+    pageNameSize: 14,
+    pageNameWeight: 400,
+    pageNameColor: 'rgb(255, 255, 255)',
+    pageNameLineHeight: '19px',
+
+    // Primary text
+    primaryTextSize: 14,
+    primaryTextWeight: 400,
+    primaryTextColor: 'rgb(252, 252, 252)',
+    primaryTextLineHeight: '16px',
+
+    // CTA button
+    ctaButtonWidth: 250,
+    ctaButtonHeight: 34,
+    ctaButtonMarginTop: 12,
+    ctaButtonRadius: 5,
+    ctaButtonTextSize: 14,
+    ctaButtonTextWeight: 700,
+    ctaButtonTextColor: 'rgba(0, 0, 0, 0.85)',
+    ctaButtonLineHeight: '20px',
+    // CTA button — white bg with dark text per 2026 extraction
+    ctaButtonBg: 'rgba(228, 230, 235, 0.95)',
+
+    // Action icons (right side)
+    actionIconsTop: 483,
+    actionIconsRight: 10,
+    actionIconsWidth: 36,
+    actionIconSize: 24,
+    actionIconMarginLeft: 6,
+    actionIconBg: 'rgba(228, 230, 235, 0)',
+    actionIconRadius: 15,
+  };
+
+  // Truncate text to 30 characters for collapsed view
+  const truncateText = (text: string, limit: number = 30) => {
+    if (!text || text.length <= limit) return text;
+    return text.substring(0, limit);
+  };
+
+  // Instagram Reels animation cycle
+  React.useEffect(() => {
+    if (platform !== 'instagram') return;
+
+    const cycle = () => {
+      // Transparent button (0-5s)
+      setInstagramFrame('transparent');
+
+      setTimeout(() => {
+        // Solid white button (5-10s)
+        setInstagramFrame('solid');
+      }, 5000);
+
+      setTimeout(() => {
+        // Expanded CTA (10-30s)
+        setInstagramFrame('expanded');
+      }, 10000);
+    };
+
+    // Start cycle immediately
+    cycle();
+
+    // Repeat every 30 seconds
+    const interval = setInterval(cycle, 30000);
+
+    return () => clearInterval(interval);
+  }, [platform]);
+
+  return (
+    <div
+      className="meta-preview"
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: reels.fontFamily,
+      }}
+    >
+      <div
+        style={{
+          width: `${reels.containerWidth}px`, maxWidth: '100%',
+          height: `${reels.containerHeight}px`,
+          backgroundImage: reels.containerBg,
+          border: reels.containerBorder,
+          borderRadius: '8px',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        {/* Creative Image - Centered vertically */}
+        {adData.creativeImage ? (
+          <CreativeMedia
+            src={adData.creativeImage}
+            mediaType={adData.creativeMediaType}
+            alt="Reel ad"
+            autoPlay
+            showPlayOverlay={false}
+            style={{
+              position: 'absolute',
+              width: `${reels.imageWidth}px`,
+              height: `${reels.imageHeight}px`,
+              top: `${reels.imageMarginTop}px`,
+              left: '1px',
+              objectFit: 'cover',
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              position: 'absolute',
+              width: `${reels.imageWidth}px`,
+              height: `${reels.imageHeight}px`,
+              top: `${reels.imageMarginTop}px`,
+              left: '1px',
+              backgroundColor: '#333',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <div style={{ textAlign: 'center', color: 'rgba(255, 255, 255, 0.6)' }}>
+              <div
+                style={{
+                  width: '64px',
+                  height: '64px',
+                  borderRadius: '8px',
+                  backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                  margin: '0 auto 8px',
+                }}
+              />
+              <p style={{ fontSize: '14px', margin: 0 }}>Reel Preview</p>
+              <p style={{ fontSize: '12px', margin: '4px 0 0' }}>9:16 Format</p>
+            </div>
+          </div>
+        )}
+
+        {/* Top gradient overlay */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: `${reels.imageWidth}px`,
+            height: '98px',
+            background: 'linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%)',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* Bottom gradient overlay */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: `${reels.imageWidth}px`,
+            height: '271px',
+            background: 'linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%)',
+            pointerEvents: 'none',
+          }}
+        />
+
+        {/* Sponsored Pill - Top left */}
+        <div
+          style={{
+            position: 'absolute',
+            top: `${reels.sponsoredPillTop}px`,
+            left: `${reels.sponsoredPillLeft}px`,
+            padding: reels.sponsoredPillPadding,
+            backgroundColor: reels.sponsoredPillBg,
+            borderRadius: reels.sponsoredPillRadius,
+          }}
+        >
+          <span
+            style={{
+              fontSize: `${reels.sponsoredPillSize}px`,
+              fontWeight: 400,
+              color: reels.sponsoredPillColor,
+            }}
+          >
+            Sponsored
+          </span>
+        </div>
+
+        {/* Play Icon Overlay - Center */}
+        {adData.creativeImage && (
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: '64px',
+              height: '64px',
+              backgroundColor: 'rgba(0, 0, 0, 0.4)',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="white">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+          </div>
+        )}
+
+        {platform === 'facebook' ? (
+          /* Facebook Reels Layout — anchored to bottom */
+          <>
+            {/* Bottom content area */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '12px',
+                left: `${reels.profileLeft}px`,
+                right: '50px',
+                zIndex: 10,
+              }}
+            >
+              {/* Profile Image + Page Name */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  marginBottom: '6px',
+                }}
+              >
+                <div
+                  style={{
+                    width: `${reels.profileImageSize}px`,
+                    height: `${reels.profileImageSize}px`,
+                    borderRadius: reels.profileImageRadius,
+                    overflow: 'hidden',
+                    flexShrink: 0,
+                  }}
+                >
+                  <ProfileAvatar src={adData.profileImage} name={adData.brandName} fontSize={12} />
+                </div>
+                <span
+                  style={{
+                    fontSize: `${reels.pageNameSize}px`,
+                    fontWeight: reels.pageNameWeight,
+                    lineHeight: reels.pageNameLineHeight,
+                    color: reels.pageNameColor,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {adData.brandName}
+                </span>
+              </div>
+
+              {/* Primary Text */}
+              <div style={{ marginBottom: '6px' }}>
+                <span
+                  style={{
+                    fontSize: `${reels.primaryTextSize}px`,
+                    fontWeight: reels.primaryTextWeight,
+                    lineHeight: reels.primaryTextLineHeight,
+                    color: reels.primaryTextColor,
+                  }}
+                >
+                  {truncateText(adData.primaryText || adData.headline, 30)}
+                  {(adData.primaryText || adData.headline || '').length > 30 && (
+                    <span style={{ color: 'rgba(255,255,255,0.7)' }}>...more</span>
+                  )}
+                </span>
+              </div>
+
+              {/* CTA Button */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: `${reels.ctaButtonWidth}px`,
+                  height: `${reels.ctaButtonHeight}px`,
+                  backgroundColor: reels.ctaButtonBg,
+                  borderRadius: `${reels.ctaButtonRadius}px`,
+                  cursor: 'pointer',
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: `${reels.ctaButtonTextSize}px`,
+                    fontWeight: reels.ctaButtonTextWeight,
+                    lineHeight: reels.ctaButtonLineHeight,
+                    color: reels.ctaButtonTextColor,
+                  }}
+                >
+                  {adData.callToAction || 'Learn more'}
+                </span>
+              </div>
+            </div>
+
+            {/* Action Icons - Right side, anchored to bottom */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '12px',
+                right: '10px',
+                width: `${reels.actionIconsWidth}px`,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '14px',
+                zIndex: 10,
+              }}
+            >
+              {/* Like */}
+              <button
+                style={{
+                  width: `${reels.actionIconSize}px`,
+                  height: `${reels.actionIconSize}px`,
+                  marginLeft: `${reels.actionIconMarginLeft}px`,
+                  backgroundColor: reels.actionIconBg,
+                  borderRadius: `${reels.actionIconRadius}px`,
+                  border: 'none',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                </svg>
+              </button>
+
+              {/* Comment */}
+              <button
+                style={{
+                  width: `${reels.actionIconSize}px`,
+                  height: `${reels.actionIconSize}px`,
+                  marginLeft: `${reels.actionIconMarginLeft}px`,
+                  backgroundColor: reels.actionIconBg,
+                  borderRadius: `${reels.actionIconRadius}px`,
+                  border: 'none',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </svg>
+              </button>
+
+              {/* Share */}
+              <button
+                style={{
+                  width: `${reels.actionIconSize}px`,
+                  height: `${reels.actionIconSize}px`,
+                  marginLeft: `${reels.actionIconMarginLeft}px`,
+                  backgroundColor: reels.actionIconBg,
+                  borderRadius: `${reels.actionIconRadius}px`,
+                  border: 'none',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                  <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+                  <polyline points="16 6 12 2 8 6"/>
+                  <line x1="12" y1="2" x2="12" y2="15"/>
+                </svg>
+              </button>
+            </div>
+          </>
+        ) : (
+          /* Instagram Reels Layout - Animated */
+          <>
+            {/* Profile Section - Bottom overlay */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '12px',
+                left: '16px',
+                right: '50px',
+                zIndex: 10,
+              }}
+            >
+              {/* Profile Image + Page Name + Follow Button */}
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  marginBottom: '12px',
+                }}
+              >
+                {/* Profile Image */}
+                <div
+                  style={{
+                    width: `${reels.profileImageSize}px`,
+                    height: `${reels.profileImageSize}px`,
+                    borderRadius: reels.profileImageRadius,
+                    overflow: 'hidden',
+                    flexShrink: 0,
+                    border: '2px solid rgba(255, 255, 255, 0.2)',
+                  }}
+                >
+                  <ProfileAvatar
+                    src={adData.profileImage}
+                    name={adData.brandName}
+                    fontSize={10}
+                    background="linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)"
+                  />
+                </div>
+
+                {/* Page Name */}
+                <span
+                  style={{
+                    fontSize: `${reels.pageNameSize}px`,
+                    fontWeight: 600,
+                    color: reels.pageNameColor,
+                    flex: 1,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {adData.brandName}
+                </span>
+
+                {/* Follow Button */}
+                <button
+                  style={{
+                    backgroundColor: 'rgb(0, 149, 246)',
+                    color: 'white',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    padding: '6px 12px',
+                    borderRadius: '8px',
+                    border: 'none',
+                    cursor: 'pointer',
+                    flexShrink: 0,
+                  }}
+                >
+                  Follow
+                </button>
+              </div>
+
+              {/* Animated CTA Section */}
+              {instagramFrame === 'expanded' ? (
+                /* Frame 2: Expanded CTA Container */
+                <div
+                  style={{
+                    backgroundColor: 'rgba(38, 38, 38, 0.9)',
+                    backdropFilter: 'blur(8px)',
+                    borderRadius: '16px',
+                    padding: '16px',
+                    marginBottom: '8px',
+                  }}
+                >
+                  {/* Thumbnail + Headline */}
+                  <div
+                    style={{
+                      display: 'flex',
+                      gap: '12px',
+                      alignItems: 'center',
+                      marginBottom: '12px',
+                    }}
+                  >
+                    {/* 1:1 Thumbnail */}
+                    <div
+                      style={{
+                        width: '64px',
+                        height: '64px',
+                        borderRadius: '8px',
+                        overflow: 'hidden',
+                        flexShrink: 0,
+                        backgroundColor: '#555',
+                      }}
+                    >
+                      {adData.creativeImage ? (
+                        <CreativeMedia
+                          src={adData.creativeImage}
+                          mediaType={adData.creativeMediaType}
+                          alt="Ad preview"
+                          autoPlay
+                          showPlayOverlay={false}
+                          style={{
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                          }}
+                        />
+                      ) : (
+                        <div
+                          style={{
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                          }}
+                        >
+                          <div style={{ width: '48px', height: '48px', backgroundColor: '#666', borderRadius: '4px' }} />
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Headline */}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <span
+                        style={{
+                          fontSize: '11px',
+                          fontWeight: 500,
+                          color: 'white',
+                          lineHeight: '14px',
+                        }}
+                      >
+                        {adData.headline}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* CTA Button */}
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '100%',
+                      height: '40px',
+                      backgroundColor: 'white',
+                      borderRadius: '8px',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontSize: '14px',
+                        fontWeight: 600,
+                        color: 'black',
+                      }}
+                    >
+                      {adData.callToAction || 'Learn more'}
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                /* Frame 1: Simple CTA (transparent or solid) */
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    height: '36px',
+                    backgroundColor: instagramFrame === 'transparent' ? 'transparent' : 'white',
+                    border: instagramFrame === 'transparent' ? '2px solid white' : 'none',
+                    borderRadius: '8px',
+                    marginBottom: '8px',
+                    cursor: 'pointer',
+                    transition: 'all 0.5s ease',
+                  }}
+                >
+                  <span
+                    style={{
+                      fontSize: '14px',
+                      fontWeight: 600,
+                      color: instagramFrame === 'transparent' ? 'white' : 'black',
+                    }}
+                  >
+                    {adData.callToAction || 'Learn more'}
+                  </span>
+                </div>
+              )}
+
+              {/* Primary Text */}
+              <span
+                style={{
+                  display: 'block',
+                  fontSize: `${reels.primaryTextSize}px`,
+                  fontWeight: reels.primaryTextWeight,
+                  lineHeight: reels.primaryTextLineHeight,
+                  color: reels.primaryTextColor,
+                  marginBottom: '4px',
+                }}
+              >
+                {truncateText(adData.primaryText || adData.headline, 25)}
+                {(adData.primaryText || adData.headline || '').length > 25 && (
+                  <span style={{ color: 'rgba(255,255,255,0.7)' }}>...more</span>
+                )}
+              </span>
+
+              {/* Ad Tag */}
+              <span
+                style={{
+                  fontSize: '12px',
+                  color: 'rgba(255, 255, 255, 0.7)',
+                }}
+              >
+                Ad
+              </span>
+            </div>
+
+            {/* Right Side Actions - Instagram style, anchored to bottom */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '12px',
+                right: '12px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '14px',
+                zIndex: 10,
+              }}
+            >
+              {/* Like */}
+              <button
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 0,
+                }}
+              >
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                </svg>
+              </button>
+
+              {/* Comment */}
+              <button
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 0,
+                }}
+              >
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+                </svg>
+              </button>
+
+              {/* Send */}
+              <button
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 0,
+                }}
+              >
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                  <line x1="22" y1="2" x2="11" y2="13"/>
+                  <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                </svg>
+              </button>
+
+              {/* More */}
+              <button
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 0,
+                }}
+              >
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
+                  <circle cx="6" cy="12" r="2" />
+                  <circle cx="12" cy="12" r="2" />
+                  <circle cx="18" cy="12" r="2" />
+                </svg>
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+MetaReelPreview.displayName = 'MetaReelPreview';