{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "x-follow-card",
  "title": "X Follow Card",
  "description": "Animated X profile follow card — spring bounce-in, staggered blur-in, a synthetic cursor that clicks Follow and flips it to Following. Light/dark, horizontal or vertical.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "registryDependencies": ["@remocn/cursor"],
  "files": [
    {
      "path": "registry/remocn/x-follow-card/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/Inter\";\nimport { useState } from \"react\";\nimport {\n  AbsoluteFill,\n  Img,\n  interpolate,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport { Cursor, type CursorStyle } from \"@/components/remocn/cursor\";\nimport {\n  type CursorWaypoint,\n  useCursorPath,\n} from \"@/components/remocn/use-cursor-path\";\n\nconst { fontFamily: FONT_FAMILY } = loadFont();\n\nexport interface XFollowCardProps {\n  name?: string;\n  handle?: string;\n  bio?: string;\n  avatarUrl?: string;\n  coverUrl?: string;\n  location?: string;\n  website?: string;\n  joined?: string;\n  verified?: boolean;\n  accentColor?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  speed?: number;\n}\n\ninterface Theme {\n  page: string;\n  cardBg: string;\n  cardBorder: string;\n  fg: string;\n  fgMuted: string;\n  divider: string;\n}\n\nexport const THEMES: Record<\"light\" | \"dark\", Theme> = {\n  light: {\n    page: \"#f5f7f9\",\n    cardBg: \"#ffffff\",\n    cardBorder: \"#e6e9eb\",\n    fg: \"#0f1419\",\n    fgMuted: \"#536471\",\n    divider: \"#eff3f4\",\n  },\n  dark: {\n    page: \"#0a0a0a\",\n    cardBg: \"#16181c\",\n    cardBorder: \"#2f3336\",\n    fg: \"#e7e9ea\",\n    fgMuted: \"#71767b\",\n    divider: \"#2f3336\",\n  },\n};\n\nexport const CLICK_FRAME = 110;\n\nconst BUTTON_LAYOUT: Record<\n  \"horizontal\" | \"vertical\",\n  { x: number; y: number; w: number; h: number }\n> = {\n  horizontal: { x: 800, y: 240, w: 116, h: 40 },\n  vertical: { x: 542, y: 336, w: 124, h: 44 },\n};\n\nexport function cardBounceIn(\n  frame: number,\n  fps: number,\n): { translateY: number; scale: number } {\n  const s = spring({\n    fps,\n    frame,\n    config: { damping: 12, stiffness: 120, mass: 0.8 },\n  });\n  const translateY = interpolate(s, [0, 1], [60, 0]);\n  const scale = interpolate(s, [0, 1], [0.9, 1]);\n  return { translateY, scale };\n}\n\nexport function blurInSchedule(): {\n  group: number;\n  start: number;\n  end: number;\n}[] {\n  return [\n    { group: 0, start: 20, end: 26 },\n    { group: 1, start: 22, end: 28 },\n    { group: 2, start: 24, end: 30 },\n    { group: 3, start: 26, end: 32 },\n    { group: 4, start: 28, end: 34 },\n    { group: 5, start: 30, end: 36 },\n    { group: 6, start: 32, end: 38 },\n    { group: 7, start: 34, end: 40 },\n    { group: 8, start: 36, end: 42 },\n  ];\n}\n\nexport function blurInAt(\n  step: { start: number; end: number },\n  frame: number,\n): { blur: number; opacity: number; translateY: number } {\n  const range: [number, number] = [step.start, step.end];\n  const opts = {\n    extrapolateLeft: \"clamp\" as const,\n    extrapolateRight: \"clamp\" as const,\n  };\n  return {\n    blur: interpolate(frame, range, [8, 0], opts),\n    opacity: interpolate(frame, range, [0, 1], opts),\n    translateY: interpolate(frame, range, [8, 0], opts),\n  };\n}\n\nexport function followStateAt(frame: number, speed: number): boolean {\n  return frame * speed >= CLICK_FRAME;\n}\n\nexport function buildFollowWaypoints(args: {\n  buttonCenter: { x: number; y: number };\n  orientation: \"horizontal\" | \"vertical\";\n}): CursorWaypoint[] {\n  const { buttonCenter, orientation } = args;\n  const rest =\n    orientation === \"vertical\" ? { x: 640, y: 1120 } : { x: 1120, y: 600 };\n  return [\n    { at: 0, x: rest.x, y: rest.y },\n    { at: 75, x: rest.x, y: rest.y },\n    {\n      at: CLICK_FRAME,\n      x: buttonCenter.x,\n      y: buttonCenter.y,\n      duration: 32,\n      click: true,\n      easing: \"inOut\",\n    },\n    { at: CLICK_FRAME + 30, x: buttonCenter.x, y: buttonCenter.y },\n  ];\n}\n\nfunction tintGradient(accent: string): string {\n  return `linear-gradient(135deg, ${accent} 0%, ${accent}99 55%, ${accent}55 100%)`;\n}\n\nfunction Cover({\n  coverUrl,\n  accent,\n  height,\n}: {\n  coverUrl: string;\n  accent: string;\n  height: number;\n}) {\n  const [errored, setErrored] = useState(false);\n  const fallback = (\n    <div\n      style={{\n        width: \"100%\",\n        height,\n        background: tintGradient(accent),\n      }}\n    />\n  );\n  if (errored || !coverUrl) return fallback;\n  return (\n    <Img\n      src={coverUrl}\n      crossOrigin=\"anonymous\"\n      onError={() => setErrored(true)}\n      style={{ width: \"100%\", height, objectFit: \"cover\", display: \"block\" }}\n    />\n  );\n}\n\nfunction Avatar({\n  avatarUrl,\n  name,\n  size,\n  accent,\n  theme,\n}: {\n  avatarUrl: string;\n  name: string;\n  size: number;\n  accent: string;\n  theme: Theme;\n}) {\n  const [errored, setErrored] = useState(false);\n  const ringStyle = {\n    width: size,\n    height: size,\n    borderRadius: \"100%\",\n    border: `4px solid ${theme.cardBg}`,\n    flexShrink: 0,\n    boxSizing: \"border-box\" as const,\n  };\n\n  if (errored || !avatarUrl) {\n    return (\n      <div\n        style={{\n          ...ringStyle,\n          background: `${accent}33`,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          color: accent,\n          fontSize: size * 0.4,\n          fontWeight: 700,\n          fontFamily: FONT_FAMILY,\n        }}\n      >\n        {name.charAt(0).toUpperCase()}\n      </div>\n    );\n  }\n\n  return (\n    <Img\n      src={avatarUrl}\n      crossOrigin=\"anonymous\"\n      onError={() => setErrored(true)}\n      style={{ ...ringStyle, objectFit: \"cover\" }}\n    />\n  );\n}\n\nfunction VerifiedBadge({ accent, size }: { accent: string; size: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 22 22\"\n      width={size}\n      height={size}\n      fill={accent}\n    >\n      <title>Verified</title>\n      <path d=\"M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z\" />\n    </svg>\n  );\n}\n\nfunction ProfileInfo({\n  name,\n  handle,\n  bio,\n  verified,\n  accent,\n  theme,\n  isVertical,\n  nameStyle,\n  handleStyle,\n  bioStyle,\n}: {\n  name: string;\n  handle: string;\n  bio: string;\n  verified: boolean;\n  accent: string;\n  theme: Theme;\n  isVertical: boolean;\n  nameStyle: React.CSSProperties;\n  handleStyle: React.CSSProperties;\n  bioStyle: React.CSSProperties;\n}) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 2,\n        marginTop: 12,\n      }}\n    >\n      <div\n        style={{ ...nameStyle, display: \"flex\", alignItems: \"center\", gap: 6 }}\n      >\n        <span\n          style={{\n            fontSize: isVertical ? 28 : 24,\n            fontWeight: 800,\n            color: theme.fg,\n            fontFamily: FONT_FAMILY,\n            lineHeight: 1.2,\n            letterSpacing: \"-0.01em\",\n          }}\n        >\n          {name}\n        </span>\n        {verified && (\n          <VerifiedBadge accent={accent} size={isVertical ? 24 : 22} />\n        )}\n      </div>\n      <span\n        style={{\n          ...handleStyle,\n          fontSize: isVertical ? 18 : 16,\n          fontWeight: 400,\n          color: theme.fgMuted,\n          fontFamily: FONT_FAMILY,\n          lineHeight: 1.3,\n        }}\n      >\n        @{handle}\n      </span>\n      <p\n        style={{\n          ...bioStyle,\n          margin: \"8px 0 0\",\n          fontSize: isVertical ? 18 : 16,\n          fontWeight: 400,\n          color: theme.fg,\n          fontFamily: FONT_FAMILY,\n          lineHeight: 1.4,\n          display: \"-webkit-box\",\n          WebkitLineClamp: 2,\n          WebkitBoxOrient: \"vertical\",\n          overflow: \"hidden\",\n        }}\n      >\n        {bio}\n      </p>\n    </div>\n  );\n}\n\nfunction MetaRow({\n  location,\n  website,\n  joined,\n  accent,\n  theme,\n}: {\n  location: string;\n  website: string;\n  joined: string;\n  accent: string;\n  theme: Theme;\n}) {\n  const itemStyle = {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: 6,\n    fontSize: 15,\n    color: theme.fgMuted,\n    fontFamily: FONT_FAMILY,\n  } as const;\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexWrap: \"wrap\",\n        gap: 16,\n        marginTop: 14,\n      }}\n    >\n      <span style={itemStyle}>\n        <PinIcon color={theme.fgMuted} />\n        {location}\n      </span>\n      <span style={itemStyle}>\n        <LinkIcon color={theme.fgMuted} />\n        <span style={{ color: accent }}>{website}</span>\n      </span>\n      <span style={itemStyle}>\n        <CalendarIcon color={theme.fgMuted} />\n        {`Joined ${joined}`}\n      </span>\n    </div>\n  );\n}\n\nfunction PinIcon({ color }: { color: string }) {\n  return (\n    <svg width={16} height={16} viewBox=\"0 0 24 24\" fill={color}>\n      <title>Location</title>\n      <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z\" />\n    </svg>\n  );\n}\n\nfunction LinkIcon({ color }: { color: string }) {\n  return (\n    <svg width={16} height={16} viewBox=\"0 0 24 24\" fill={color}>\n      <title>Website</title>\n      <path d=\"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z\" />\n    </svg>\n  );\n}\n\nfunction CalendarIcon({ color }: { color: string }) {\n  return (\n    <svg width={16} height={16} viewBox=\"0 0 24 24\" fill={color}>\n      <title>Joined</title>\n      <path d=\"M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </svg>\n  );\n}\n\nfunction FollowButton({\n  frame,\n  speed,\n  accent,\n  theme,\n  layout,\n  pressScale,\n}: {\n  frame: number;\n  speed: number;\n  accent: string;\n  theme: Theme;\n  layout: { x: number; y: number; w: number; h: number };\n  pressScale: number;\n}) {\n  const _followed = followStateAt(frame, speed);\n  const flip = interpolate(\n    frame * speed,\n    [CLICK_FRAME, CLICK_FRAME + 10],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  const base = {\n    position: \"absolute\" as const,\n    left: layout.x,\n    top: layout.y,\n    width: layout.w,\n    height: layout.h,\n    borderRadius: layout.h / 2,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: 16,\n    fontWeight: 700,\n    fontFamily: FONT_FAMILY,\n    boxSizing: \"border-box\" as const,\n    scale: `${pressScale}`,\n    transformOrigin: \"center\",\n  };\n\n  return (\n    <div style={base}>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: layout.h / 2,\n          background: accent,\n          color: \"#ffffff\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          opacity: 1 - flip,\n        }}\n      >\n        Follow\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: layout.h / 2,\n          background: theme.cardBg,\n          border: `1px solid ${theme.cardBorder}`,\n          color: theme.fg,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          opacity: flip,\n        }}\n      >\n        Following\n      </div>\n    </div>\n  );\n}\n\nfunction MessageButton({\n  layout,\n  theme,\n}: {\n  layout: { x: number; y: number; size: number };\n  theme: Theme;\n}) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: layout.x,\n        top: layout.y,\n        width: layout.size,\n        height: layout.size,\n        borderRadius: layout.size / 2,\n        border: `1px solid ${theme.cardBorder}`,\n        background: theme.cardBg,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <svg width={20} height={20} viewBox=\"0 0 24 24\" fill={theme.fg}>\n        <title>Message</title>\n        <path d=\"M1.998 5.5c0-1.381 1.119-2.5 2.5-2.5h15c1.381 0 2.5 1.119 2.5 2.5v13c0 1.381-1.119 2.5-2.5 2.5h-15c-1.381 0-2.5-1.119-2.5-2.5v-13zm2.5-.5c-.276 0-.5.224-.5.5v2.764l8 3.638 8-3.638V5.5c0-.276-.224-.5-.5-.5h-15zm15.5 5.463l-8 3.638-8-3.638V18.5c0 .276.224.5.5.5h15c.276 0 .5-.224.5-.5v-8.037z\" />\n      </svg>\n    </div>\n  );\n}\n\nfunction Tabs({\n  accent,\n  theme,\n  isVertical,\n}: {\n  accent: string;\n  theme: Theme;\n  isVertical: boolean;\n}) {\n  const tabs = [\"Posts\", \"Replies\", \"Media\", \"Likes\"];\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        marginTop: 0,\n        columnGap: 32,\n        borderBottom: `1px solid ${theme.divider}`,\n      }}\n    >\n      {tabs.map((tab, i) => {\n        const active = i === 0;\n        return (\n          <div\n            key={tab}\n            style={{\n              // flex: 1,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              paddingBottom: 12,\n              position: \"relative\",\n            }}\n          >\n            <span\n              style={{\n                fontSize: isVertical ? 17 : 15,\n                fontWeight: active ? 700 : 500,\n                color: active ? theme.fg : theme.fgMuted,\n                fontFamily: FONT_FAMILY,\n              }}\n            >\n              {tab}\n            </span>\n            {active && (\n              <div\n                style={{\n                  position: \"absolute\",\n                  bottom: -1,\n                  height: 4,\n                  width: 56,\n                  borderRadius: 2,\n                  background: accent,\n                }}\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction SamplePost({\n  name,\n  handle,\n  avatarUrl,\n  accent,\n  theme,\n}: {\n  name: string;\n  handle: string;\n  avatarUrl: string;\n  accent: string;\n  theme: Theme;\n}) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 12,\n        marginTop: 16,\n      }}\n    >\n      <Avatar\n        avatarUrl={avatarUrl}\n        name={name}\n        size={44}\n        accent={accent}\n        theme={theme}\n      />\n      <div style={{ flex: 1, minWidth: 0 }}>\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 6,\n            fontFamily: FONT_FAMILY,\n          }}\n        >\n          <span style={{ fontSize: 15, fontWeight: 700, color: theme.fg }}>\n            {name}\n          </span>\n          <span style={{ fontSize: 15, color: theme.fgMuted }}>\n            {`@${handle} · 2d`}\n          </span>\n        </div>\n        <p\n          style={{\n            margin: \"4px 0 0\",\n            fontSize: 15,\n            color: theme.fg,\n            fontFamily: FONT_FAMILY,\n            lineHeight: 1.4,\n          }}\n        >\n          Shipping something new today. Built entirely with Remotion and a lot\n          of coffee. More soon.\n        </p>\n        <div\n          style={{\n            display: \"flex\",\n            gap: 40,\n            marginTop: 10,\n            color: theme.fgMuted,\n            fontFamily: FONT_FAMILY,\n            fontSize: 13,\n          }}\n        >\n          <span>12</span>\n          <span>48</span>\n          <span>312</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction CursorLayer({\n  accent,\n  style,\n}: {\n  accent: string;\n  style: CursorStyle;\n}) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        pointerEvents: \"none\",\n      }}\n    >\n      <Cursor variant=\"pointer\" rippleColor={accent} style={style} />\n    </div>\n  );\n}\n\nexport function XFollowCard({\n  name = \"remocn\",\n  handle = \"remocn\",\n  bio = \"Building the collaborative video toolkit for small teams.\\nShip demos faster with ready-made motion.\",\n  avatarUrl = \"/logo.svg\",\n  coverUrl = \"\",\n  location = \"Tunisia\",\n  website = \"remocn.tn\",\n  joined = \"January 2024\",\n  verified = true,\n  accentColor = \"#1d9bf0\",\n  orientation = \"horizontal\",\n  speed = 1,\n}: XFollowCardProps) {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const t = THEMES.light;\n  const isVertical = orientation === \"vertical\";\n\n  const refW = isVertical ? 720 : 1280;\n  const refH = isVertical ? 1280 : 720;\n  const stageScale = Math.min(width / refW, height / refH);\n\n  const cardWidth = isVertical ? 660 : 600;\n  const cardLeft = (refW - cardWidth) / 2;\n  const cardTop = isVertical ? 140 : 70;\n  const coverHeight = isVertical ? 180 : 150;\n  const avatarSize = isVertical ? 120 : 110;\n\n  const bounce = cardBounceIn(frame * speed, fps);\n  const schedule = blurInSchedule();\n\n  const layout = BUTTON_LAYOUT[orientation];\n  const buttonCenter = {\n    x: layout.x + layout.w / 2,\n    y: layout.y + layout.h / 2,\n  };\n\n  const cursorStyle = useCursorPath(\n    buildFollowWaypoints({ buttonCenter, orientation }),\n    { speed },\n  );\n  const pressScale = 0.9 + 0.1 * (cursorStyle.pressScale ?? 1);\n\n  const messageLayout = {\n    x: layout.x - layout.h - 8,\n    y: layout.y,\n    size: layout.h,\n  };\n\n  const groupStyle = (group: number) => {\n    const step = schedule[group];\n    const b = blurInAt(step, frame * speed);\n    return {\n      filter: b.blur > 0 ? `blur(${b.blur}px)` : \"none\",\n      opacity: b.opacity,\n      translate: `0 ${b.translateY}px`,\n    };\n  };\n\n  return (\n    <AbsoluteFill style={{ background: \"transparent\" }}>\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: refW,\n          height: refH,\n          translate: \"-50% -50%\",\n          scale: `${stageScale}`,\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            left: cardLeft,\n            top: cardTop,\n            width: cardWidth,\n            background: t.cardBg,\n            border: `1px solid ${t.cardBorder}`,\n            borderRadius: 24,\n            overflow: \"hidden\",\n            translate: `0 ${bounce.translateY}px`,\n            scale: `${bounce.scale}`,\n            transformOrigin: \"center top\",\n            boxShadow: \"0 12px 40px -16px rgba(15,20,25,0.18)\",\n          }}\n        >\n          <div style={groupStyle(0)}>\n            <Cover\n              coverUrl={coverUrl}\n              accent={accentColor}\n              height={coverHeight}\n            />\n          </div>\n\n          <div style={{ padding: \"0 24px 24px\" }}>\n            <div\n              style={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                alignItems: \"flex-end\",\n                marginTop: -(avatarSize / 2),\n                position: \"relative\",\n              }}\n            >\n              <div\n                style={{\n                  width: avatarSize,\n                  height: avatarSize,\n                  borderRadius: \"100%\",\n                  background: t.cardBg,\n                  flexShrink: 0,\n                }}\n              >\n                <div style={groupStyle(1)}>\n                  <Avatar\n                    avatarUrl={avatarUrl}\n                    name={name}\n                    size={avatarSize}\n                    accent={accentColor}\n                    theme={t}\n                  />\n                </div>\n              </div>\n            </div>\n\n            <ProfileInfo\n              name={name}\n              handle={handle}\n              bio={bio}\n              verified={verified}\n              accent={accentColor}\n              theme={t}\n              isVertical={isVertical}\n              nameStyle={groupStyle(2)}\n              handleStyle={groupStyle(3)}\n              bioStyle={groupStyle(4)}\n            />\n\n            <div style={groupStyle(5)}>\n              <MetaRow\n                location={location}\n                website={website}\n                joined={joined}\n                accent={accentColor}\n                theme={t}\n              />\n            </div>\n\n            <div style={{ height: layout.h - 8 }} aria-hidden=\"true\" />\n\n            <div style={groupStyle(7)}>\n              <Tabs accent={accentColor} theme={t} isVertical={isVertical} />\n            </div>\n\n            <div style={groupStyle(8)}>\n              <SamplePost\n                name={name}\n                handle={handle}\n                avatarUrl={avatarUrl}\n                accent={accentColor}\n                theme={t}\n              />\n            </div>\n          </div>\n        </div>\n\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            translate: `0 ${bounce.translateY}px`,\n            scale: `${bounce.scale}`,\n            transformOrigin: \"center top\",\n          }}\n        >\n          <div style={{ ...groupStyle(6), position: \"absolute\", inset: 0 }}>\n            <MessageButton layout={messageLayout} theme={t} />\n            <FollowButton\n              frame={frame}\n              speed={speed}\n              accent={accentColor}\n              theme={t}\n              layout={layout}\n              pressScale={pressScale}\n            />\n          </div>\n        </div>\n\n        <CursorLayer accent={accentColor} style={cursorStyle} />\n      </div>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/x-follow-card.tsx"
    }
  ],
  "type": "registry:component"
}