{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fomo-limit-orders",
  "title": "Order Flow",
  "description": "An independent 18-second trading-interface demo with fictional market data, graphite and amber styling, an original stepped mark, and editable camera choreography.",
  "dependencies": ["remotion", "@fontsource/manrope"],
  "files": [
    {
      "path": "registry/remocn-templates/fomo-limit-orders/content.ts",
      "content": "export interface FomoContent {\n  intro: string;\n  feature: string;\n  audience: string;\n  ticker: string;\n  assetName: string;\n  leverage: string;\n  position: string;\n  positionValue: string;\n  positionProfit: string;\n  positionSize: string;\n  positionQuantity: string;\n  positionReturn: string;\n  entryPrice: string;\n  liquidationPrice: string;\n  marketPrice: string;\n  change: string;\n  openInterest: string;\n  limitPrice: string;\n  margin: string;\n  orderSize: string;\n  action: string;\n  closing: string;\n}\n\nexport const fomoContent: FomoContent = {\n  intro: \"New in Order Flow\",\n  feature: \"Plan your next exit\",\n  audience: \"Before the market moves\",\n  ticker: \"DEMO\",\n  assetName: \"Demo Market\",\n  leverage: \"5x\",\n  position: \"2x Long\",\n  positionValue: \"$12,640.00\",\n  positionProfit: \"+$640.00\",\n  positionSize: \"$12.64K\",\n  positionQuantity: \"160 DEMO\",\n  positionReturn: \"10.67%\",\n  entryPrice: \"$75.00\",\n  liquidationPrice: \"$37.50\",\n  marketPrice: \"$79.00\",\n  change: \"1.28%\",\n  openInterest: \"$24M OI\",\n  limitPrice: \"$82.00\",\n  margin: \"$6,000.00\",\n  orderSize: \"$12.64K\",\n  action: \"Set an exit price\",\n  closing: \"Your price. Your next move.\",\n};\n\nexport interface FomoTheme {\n  ink: string;\n  panel: string;\n  paper: string;\n  accent: string;\n  positive: string;\n}\nexport const fomoTheme: FomoTheme = {\n  ink: \"#121310\",\n  panel: \"#20221c\",\n  paper: \"#f6f1e7\",\n  accent: \"#e8b45a\",\n  positive: \"#80bf97\",\n};\nexport interface FomoLimitOrdersProps {\n  brandName?: string;\n  accentColor?: string;\n  content?: Partial<FomoContent>;\n  theme?: Partial<FomoTheme>;\n  /** Optional, user-owned soundtrack. The source reference audio is not redistributed. */\n  audioSrc?: string;\n  volume?: number;\n}\nexport interface SceneProps {\n  t: number;\n  content: FomoContent;\n  theme: FomoTheme;\n  brandName: string;\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/content.ts"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/index.tsx",
      "content": "\"use client\";\n\nimport \"@fontsource/manrope/latin-400.css\";\nimport \"@fontsource/manrope/latin-500.css\";\nimport \"@fontsource/manrope/latin-600.css\";\nimport \"@fontsource/manrope/latin-800.css\";\nimport { AbsoluteFill, Audio, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport {\n  type FomoLimitOrdersProps,\n  fomoContent,\n  fomoTheme,\n  type SceneProps,\n} from \"./content\";\nimport {\n  FOMO_FPS,\n  FOMO_FRAMES,\n  FOMO_HEIGHT,\n  FOMO_WIDTH,\n  tween,\n} from \"./motion\";\nimport { Closing } from \"./scenes/closing\";\nimport { Confirmation } from \"./scenes/confirmation\";\nimport { Opening } from \"./scenes/opening\";\nimport { Phone } from \"./scenes/phone\";\nimport { Price } from \"./scenes/price\";\nimport { Slider } from \"./scenes/slider\";\n\nexport type { FomoContent, FomoLimitOrdersProps, FomoTheme } from \"./content\";\nexport { fomoContent, fomoTheme } from \"./content\";\nexport {\n  FOMO_FPS,\n  FOMO_FRAMES,\n  FOMO_HEIGHT,\n  FOMO_WIDTH,\n  fomoTimeline,\n} from \"./motion\";\n\nexport function FomoLimitOrders(props: FomoLimitOrdersProps) {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const t = frame / fps;\n  const scale = Math.min(width / 480, height / 270);\n  const theme = {\n    ...fomoTheme,\n    ...props.theme,\n    ...(props.accentColor ? { accent: props.accentColor } : {}),\n  };\n  const scene: SceneProps = {\n    t,\n    theme,\n    content: { ...fomoContent, ...props.content },\n    brandName: props.brandName ?? \"Order Flow\",\n  };\n  const volume = Number.isFinite(props.volume)\n    ? Math.min(1, Math.max(0, props.volume ?? 1))\n    : 1;\n  return (\n    <AbsoluteFill\n      style={{\n        background: theme.ink,\n        color: \"#fff\",\n        overflow: \"hidden\",\n        fontFamily: \"Manrope, sans-serif\",\n        fontWeight: 400,\n        WebkitFontSmoothing: \"antialiased\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: (width - 480 * scale) / 2,\n          top: (height - 270 * scale) / 2,\n          width: 480,\n          height: 270,\n          transform: `scale(${scale})`,\n          transformOrigin: \"0 0\",\n        }}\n      >\n        {t < 2.7 ? (\n          <Opening {...scene} />\n        ) : t < 8 ? (\n          <Phone {...scene} />\n        ) : t < 10.9 ? (\n          <Slider {...scene} />\n        ) : t < 12.6 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              opacity: 1 - tween(t, 12.3, 12.6),\n            }}\n          >\n            <Price {...scene} />\n          </div>\n        ) : t < 14.15 ? (\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              opacity: tween(t, 12.6, 12.78),\n            }}\n          >\n            <Confirmation {...scene} t={t + 1.85} />\n          </div>\n        ) : (\n          <Closing {...scene} t={t + 1.85} />\n        )}\n      </div>\n      {props.audioSrc?.trim() ? (\n        <Audio src={props.audioSrc} volume={volume} />\n      ) : null}\n    </AbsoluteFill>\n  );\n}\n\nexport const OrderFlow = FomoLimitOrders;\nexport type OrderFlowProps = FomoLimitOrdersProps;\n\nexport const fomoLimitOrdersConfig = {\n  componentName: \"OrderFlow\",\n  importPath: \"@/components/remocn/templates/fomo-limit-orders\",\n  controls: {\n    brandName: {\n      type: \"text-content\" as const,\n      default: \"Order Flow\",\n      description: \"Closing wordmark\",\n    },\n    accentColor: {\n      type: \"color\" as const,\n      default: \"#e8b45a\",\n      description: \"Controls and progress color\",\n    },\n  },\n  durationInFrames: FOMO_FRAMES,\n  fps: FOMO_FPS,\n  compositionWidth: FOMO_WIDTH,\n  compositionHeight: FOMO_HEIGHT,\n};\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/index.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/motion.ts",
      "content": "import { Easing, interpolate } from \"remotion\";\n\nexport const FOMO_FPS = 60;\nexport const FOMO_FRAMES = 1108;\nexport const FOMO_WIDTH = 1920;\nexport const FOMO_HEIGHT = 1080;\nexport const fomoTimeline = [\n  { id: \"opening\", from: 0, to: 162 },\n  { id: \"phone\", from: 162, to: 480 },\n  { id: \"slider\", from: 480, to: 654 },\n  { id: \"price\", from: 654, to: 756 },\n  { id: \"confirmation\", from: 756, to: 849 },\n  { id: \"closing\", from: 849, to: FOMO_FRAMES },\n] as const;\n\nexport const ease = Easing.bezier(0.22, 1, 0.36, 1);\nexport const travel = Easing.bezier(0.65, 0, 0.3, 1);\n/** Fit to 25 source-frame measurements, 10.483–10.883 seconds. */\nexport const contraction = Easing.bezier(0.652, 0.343, 0.075, 0.909);\nexport const clamp = (n: number) => Math.min(1, Math.max(0, n));\nexport function ramp(t: number, start: number, end: number) {\n  return clamp((t - start) / (end - start));\n}\nexport function tween(\n  t: number,\n  start: number,\n  end: number,\n  a = 0,\n  b = 1,\n  easing = ease,\n) {\n  return a + (b - a) * easing(ramp(t, start, end));\n}\nexport function key(t: number, times: number[], values: number[]) {\n  return interpolate(t, times, values, {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n}\nexport function money(n: number) {\n  return `$${n.toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n}\n\n/** Centerline of the phone border, in the same local coordinates as its camera. */\nexport function phoneBorderPoint(progress: number) {\n  const inset = 0.85;\n  const r = 59 - inset;\n  const straight = 230 - 59;\n  const arc = (Math.PI * r) / 2;\n  const distance = clamp(progress) * (straight + arc + 66);\n  if (distance <= straight) return { x: 230 - distance, y: 680 - inset };\n  if (distance <= straight + arc) {\n    const angle = Math.PI / 2 + (distance - straight) / r;\n    return { x: 59 + r * Math.cos(angle), y: 621 + r * Math.sin(angle) };\n  }\n  return { x: inset, y: 621 - (distance - straight - arc) };\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/motion.ts"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/scenes/closing.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { ramp, tween } from \"../motion\";\nimport { AssetIcon, Layer } from \"../ui\";\n\nexport function Closing({ t, content, brandName, theme }: SceneProps) {\n  const brand = tween(t, 18.15, 18.38);\n  return (\n    <>\n      {t < 18.3 && (\n        <Layer\n          x={15}\n          y={111}\n          w={450}\n          h={42}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            gap: 5,\n            fontSize: 22.5,\n            letterSpacing: -1,\n            whiteSpace: \"nowrap\",\n            opacity: 1 - ramp(t, 18.13, 18.24),\n          }}\n        >\n          {content.closing.split(\" \").map((word, i) => {\n            const p = tween(t, 16 + i * 0.3, 16.18 + i * 0.3);\n            return (\n              <span\n                key={i}\n                style={{\n                  opacity: p,\n                  filter: `blur(${(1 - p) * 4}px)`,\n                  transform: `translateY(${(1 - p) * 7}px)`,\n                }}\n              >\n                {word}\n              </span>\n            );\n          })}\n        </Layer>\n      )}\n      {t >= 18.15 && (\n        <Layer\n          x={15}\n          y={98}\n          w={450}\n          h={64}\n          style={{\n            display: \"grid\",\n            placeItems: \"center\",\n            fontSize: brandName.length > 9 ? 31 : 42,\n            fontWeight: 600,\n            letterSpacing: -1.2,\n            opacity: brand,\n            transform: `scale(${0.95 + 0.05 * brand})`,\n            filter: `blur(${(1 - brand) * 5}px)`,\n          }}\n        >\n          <span style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n            <AssetIcon size={42} color={theme.accent} />\n            {brandName}\n          </span>\n        </Layer>\n      )}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/scenes/closing.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/scenes/confirmation.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { key, tween } from \"../motion\";\nimport { AssetIcon, Badge, Layer, muted, row } from \"../ui\";\n\nexport function Confirmation({ t, content: c, theme }: SceneProps) {\n  const scale = key(\n    t,\n    [14.45, 14.65, 15.25, 15.6, 15.8, 16],\n    [0.67, 0.73, 1, 1.16, 1.25, 1.3],\n  );\n  const exit = tween(t, 15.77, 16, 0, 210, (v) => v * v);\n  const fill = Math.round(\n    key(t, [14.45, 14.7, 15, 15.25, 15.45], [20, 50, 83, 97, 100]),\n  );\n  return (\n    <Layer\n      x={240}\n      y={135 + exit}\n      w={300}\n      h={110}\n      style={{\n        transform: `translate(-50%, -50%) scale(${scale}) rotate(${key(t, [14.45, 15.4, 16], [-1.2, 0, 2])}deg)`,\n        background: theme.panel,\n        borderRadius: 12,\n        boxShadow: \"0 0 10px #18131e65\",\n        fontWeight: 500,\n        letterSpacing: -0.4,\n      }}\n    >\n      <Layer x={10} y={10}>\n        <Badge theme={theme}>{c.position}</Badge>\n      </Layer>\n      <Layer\n        x={235}\n        y={12}\n        w={55}\n        style={{ fontSize: 14, textAlign: \"right\", color: \"#d0ced9\" }}\n      >\n        Cancel\n      </Layer>\n      <Layer x={10} y={41} style={{ ...row, gap: 5, fontSize: 16 }}>\n        <AssetIcon size={18} color={theme.accent} />\n        <span>{c.ticker}</span>\n        <span style={{ color: muted, fontSize: 12 }}>⊙</span>\n        <span>{c.limitPrice}</span>\n      </Layer>\n      <Layer\n        x={214}\n        y={45}\n        style={{ ...row, gap: 8, fontSize: 12, color: muted }}\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden>\n          <circle\n            cx=\"7\"\n            cy=\"7\"\n            r=\"5\"\n            fill=\"none\"\n            stroke=\"#302946\"\n            strokeWidth=\"1.8\"\n          />\n          <circle\n            cx=\"7\"\n            cy=\"7\"\n            r=\"5\"\n            fill=\"none\"\n            stroke={theme.accent}\n            strokeWidth=\"1.8\"\n            strokeDasharray={`${(31.416 * fill) / 100} 31.416`}\n            transform=\"rotate(-90 7 7)\"\n          />\n        </svg>\n        <span>{fill}% filled</span>\n      </Layer>\n      <Layer\n        x={10}\n        y={86}\n        w={280}\n        style={{\n          ...row,\n          justifyContent: \"space-between\",\n          fontSize: 12,\n          color: \"#bbb8c6\",\n        }}\n      >\n        <span>\n          Margin{\" \"}\n          <span style={{ color: \"white\", fontSize: 15, marginLeft: 4 }}>\n            {c.margin}\n          </span>\n        </span>\n        <span>\n          Lev. size{\" \"}\n          <span style={{ color: \"white\", fontSize: 15, marginLeft: 4 }}>\n            {c.orderSize}\n          </span>\n        </span>\n      </Layer>\n    </Layer>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/scenes/confirmation.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/scenes/opening.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { ramp, tween } from \"../motion\";\nimport { Layer } from \"../ui\";\n\nexport function Opening({ t, content }: SceneProps) {\n  const text =\n    t < 0.7 ? content.intro : t < 1.9 ? content.feature : content.audience;\n  const start = t < 0.7 ? 0 : t < 1.9 ? 0.7 : 1.9;\n  const words = text.split(\" \");\n  return (\n    <>\n      {Array.from({ length: 10 }, (_, i) => {\n        const upper = i < 5;\n        const column = i % 5;\n        const height = [18, 48, 85, 61, 30][column];\n        const drift = tween(t, 0.8 + column * 0.025, 1.25 + column * 0.025);\n        return (\n          <Layer\n            key={i}\n            x={upper ? 277 + column * 47 : -35 + column * 47}\n            y={upper ? -14 : 270 - height + 12}\n            w={47}\n            h={height}\n            style={{\n              opacity: ramp(t, 0.8, 1.05) * (1 - ramp(t, 2.45, 2.7)),\n              transform: `translateY(${(1 - drift) * (upper ? -75 : 75) + Math.sin(t * 2 + column) * 5}px)`,\n              borderRadius: 2,\n              background: `linear-gradient(${upper ? 150 : 30}deg, #c29b5452, #8770444a 40%, #4a412d30 76%, #12131000)`,\n              boxShadow: \"inset 0.5px 0 1px #efd19626\",\n              filter: \"blur(0.7px)\",\n            }}\n          />\n        );\n      })}\n      <Layer\n        x={19}\n        y={110}\n        w={450}\n        h={42}\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          gap: 6,\n          fontSize: 24.5,\n          letterSpacing: -1.1,\n          whiteSpace: \"nowrap\",\n          opacity: 1 - ramp(t, 2.55, 2.7),\n        }}\n      >\n        {words.map((word, i) => {\n          const enter = tween(t, start + i * 0.1, start + i * 0.1 + 0.2);\n          return (\n            <span\n              key={`${start}-${i}`}\n              style={{\n                opacity: enter,\n                filter: `blur(${(1 - enter) * 5}px)`,\n                transform: `translateY(${(1 - enter) * 9}px)`,\n              }}\n            >\n              {word}\n            </span>\n          );\n        })}\n      </Layer>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/scenes/opening.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/scenes/phone.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { key, phoneBorderPoint, ramp, travel, tween } from \"../motion\";\nimport { AssetIcon, Badge, Layer, muted, row } from \"../ui\";\n\nfunction PhoneUI({ t, content: c, theme }: SceneProps) {\n  return (\n    <>\n      <Layer\n        x={62}\n        y={32}\n        style={{ opacity: ramp(t, 3.85, 4.3), fontSize: 14, fontWeight: 600 }}\n      >\n        9:41\n      </Layer>\n      <Layer\n        x={280}\n        y={37}\n        style={{ opacity: ramp(t, 3.85, 4.3), fontSize: 9, letterSpacing: 3 }}\n      >\n        ▮▮▮ ◔ ▰\n      </Layer>\n      <Layer x={54} y={73} style={{ ...row, gap: 14 }}>\n        <span style={{ position: \"relative\", display: \"flex\" }}>\n          <AssetIcon size={44} color={theme.accent} />\n          <span\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              borderRadius: \"50%\",\n              background: \"black\",\n              opacity: 1 - ramp(t, 3.5, 4.1),\n              mixBlendMode: \"darken\",\n            }}\n          />\n          <svg\n            width=\"44\"\n            height=\"44\"\n            viewBox=\"0 0 40 40\"\n            style={{ position: \"absolute\", opacity: 1 - ramp(t, 3.5, 4.1) }}\n          >\n            <circle\n              cx=\"20\"\n              cy=\"20\"\n              r=\"19.8\"\n              fill=\"none\"\n              stroke=\"#ffffff10\"\n              strokeWidth=\"0.4\"\n            />\n            <path d=\"M9 25h5v6H9Zm8-8h5v14h-5Zm8-8h6v22h-6Z\" fill=\"white\" />\n          </svg>\n        </span>\n        <div>\n          <div style={{ ...row, gap: 8, fontSize: 16.5, letterSpacing: -0.5 }}>\n            {c.ticker}\n            <span\n              style={{\n                fontSize: 12,\n                color: theme.accent,\n                borderRadius: 3,\n                padding: \"1px 5px\",\n                background: `${theme.accent}25`,\n                opacity: ramp(t, 3.35, 3.85),\n              }}\n            >\n              {c.leverage}\n            </span>\n          </div>\n          <div style={{ marginTop: 3, fontSize: 12, color: muted }}>\n            {c.assetName.slice(\n              0,\n              Math.floor(tween(t, 3.28, 4.1, 0, c.assetName.length)),\n            )}\n          </div>\n        </div>\n      </Layer>\n      <div style={{ opacity: ramp(t, 3.85, 4.3) }}>\n        <Layer x={23} y={135} style={{ fontSize: 24, letterSpacing: -0.9 }}>\n          {c.marketPrice}\n        </Layer>\n        <Layer x={24} y={169} style={{ fontSize: 12, color: theme.positive }}>\n          ↑ $1.00 ({c.change})\n        </Layer>\n        <Layer x={22} y={215} w={355} h={110}>\n          <svg width=\"355\" height=\"110\" viewBox=\"0 0 355 110\" aria-hidden>\n            {[20, 55, 90].map((y) => (\n              <path\n                key={y}\n                d={`M0 ${y}H355`}\n                stroke=\"#ffffff0a\"\n                strokeWidth=\"0.5\"\n              />\n            ))}\n            {Array.from({ length: 57 }, (_, i) => {\n              const y =\n                85 - i * 1.07 + Math.sin(i * 0.6) * 13 + Math.sin(i * 1.4) * 4;\n              const positive = i % 5 !== 1 && i % 7 !== 2;\n              return (\n                <g\n                  key={i}\n                  stroke={positive ? theme.positive : \"#cf495e\"}\n                  fill={positive ? theme.positive : \"#cf495e\"}\n                >\n                  <path d={`M${i * 6 + 2} ${y - 6}v20`} strokeWidth=\"0.6\" />\n                  <rect\n                    x={i * 6}\n                    y={y}\n                    width=\"3.5\"\n                    height={5 + (i % 6)}\n                    rx=\"0.3\"\n                  />\n                </g>\n              );\n            })}\n          </svg>\n        </Layer>\n        <Layer\n          x={9}\n          y={334}\n          w={365}\n          style={{\n            ...row,\n            justifyContent: \"space-between\",\n            color: \"#b5b2be\",\n            fontSize: 12,\n            fontWeight: 600,\n          }}\n        >\n          <span>\n            <span style={{ color: theme.positive }}>╂</span> 15m ⌃\n          </span>\n          {[\"1D\", \"1W\", \"3M\", \"6M\", \"1Y\", \"All\"].map((s, i) => (\n            <span\n              key={s}\n              style={{\n                padding: 4,\n                background: i === 0 ? \"#2b2c26\" : undefined,\n                borderRadius: 4,\n                color: i === 0 ? \"white\" : undefined,\n              }}\n            >\n              {s}\n            </span>\n          ))}\n          <span style={{ color: theme.positive, fontSize: 21 }}>ϟ</span>\n        </Layer>\n        <Layer\n          x={17}\n          y={379}\n          w={366}\n          h={138}\n          style={{\n            background: `linear-gradient(125deg, ${theme.ink}, ${theme.panel})`,\n            borderRadius: 11,\n            boxShadow: \"inset 0 1px 8px #ffffff04\",\n          }}\n        >\n          <Layer x={11} y={9}>\n            <Badge theme={theme}>{c.position}</Badge>\n          </Layer>\n          <Layer\n            x={11}\n            y={39}\n            w={344}\n            style={{\n              ...row,\n              justifyContent: \"space-between\",\n              fontSize: 21,\n              fontWeight: 500,\n              letterSpacing: -1.1,\n            }}\n          >\n            <span>{c.positionValue}</span>\n            <span style={{ color: theme.positive }}>{c.positionProfit}</span>\n          </Layer>\n          <Layer x={11} y={70} style={{ fontSize: 13, color: muted }}>\n            Lev. size <span style={{ color: \"#e7e6ed\" }}>{c.positionSize}</span>{\" \"}\n            ({c.positionQuantity})\n          </Layer>\n          <Layer x={265} y={70} style={{ fontSize: 13, color: \"#bab7c4\" }}>\n            <span style={{ color: theme.positive }}>▴</span> {c.positionReturn}\n          </Layer>\n          <Layer\n            x={16}\n            y={97}\n            w={334}\n            h={0.6}\n            style={{ background: \"#ffffff0b\" }}\n          />\n          <Layer\n            x={11}\n            y={108}\n            w={344}\n            style={{\n              ...row,\n              justifyContent: \"space-between\",\n              fontSize: 13,\n              color: muted,\n            }}\n          >\n            <span>\n              Avg. entry{\" \"}\n              <span style={{ color: \"white\", marginLeft: 6 }}>\n                {c.entryPrice}\n              </span>\n            </span>\n            <span>\n              Liq. price{\" \"}\n              <span style={{ color: \"white\", marginLeft: 6 }}>\n                {c.liquidationPrice}\n              </span>\n            </span>\n          </Layer>\n        </Layer>\n        <Layer\n          x={28}\n          y={541}\n          w={345}\n          style={{\n            ...row,\n            justifyContent: \"space-between\",\n            color: theme.accent,\n            fontSize: 13,\n            fontWeight: 600,\n          }}\n        >\n          <span>\n            <span style={{ color: muted, marginRight: 10 }}>＋</span>Add a note\n          </span>\n          <span>Add SL/TP</span>\n        </Layer>\n        <Layer x={51} y={575} style={{ fontSize: 11, color: muted }}>\n          Overview　　Activity　　Details\n        </Layer>\n        <Layer\n          x={24}\n          y={593}\n          w={350}\n          h={44}\n          style={{ ...row, gap: 15, fontSize: 13, fontWeight: 600 }}\n        >\n          <div\n            style={{\n              width: 43,\n              height: 42,\n              display: \"grid\",\n              placeItems: \"center\",\n              borderRadius: 11,\n              background: \"#282c22\",\n              border: \"1px solid #7e806c\",\n            }}\n          >\n            <svg width=\"19\" height=\"19\" viewBox=\"0 0 24 24\">\n              <path d=\"m4 16 11-11 5 5-11 11-6 1Z\" fill=\"white\" />\n              <path d=\"m13 7 5 5\" stroke=\"#282c22\" />\n            </svg>\n          </div>\n          <div\n            style={{\n              background: theme.accent,\n              color: theme.ink,\n              borderRadius: 9,\n              padding: \"11px 14px\",\n              whiteSpace: \"nowrap\",\n              boxShadow: \"inset 0 1px 1px #ffffff99\",\n            }}\n          >\n            Close position\n          </div>\n          <div\n            style={{\n              background: theme.panel,\n              color: theme.positive,\n              borderRadius: 9,\n              padding: \"11px 32px\",\n            }}\n          >\n            Long\n          </div>\n        </Layer>\n      </div>\n    </>\n  );\n}\n\nexport function Phone(props: SceneProps) {\n  const { t } = props;\n  const push = tween(t, 4.63, 5.18, 0, 1, travel);\n  const pull = tween(t, 6.04, 6.92, 0, 1, travel);\n  const orbit = tween(t, 6.92, 7.7, 0, 1, travel);\n  const openingScale = tween(t, 3.4, 4.3, 1.45, 1);\n  const s = openingScale + 0.18 * push - 0.28 * pull + 0.55 * orbit;\n  const x = tween(t, 3.4, 4.3, 62, 75) - 67 * push + 134 * pull + 95 * orbit;\n  const y = tween(t, 3.4, 4.3, 9, 45) - 435 * push - 13 * pull - 309 * orbit;\n  const dotTimes = [\n    6.55, 6.75, 7, 7.25, 7.5, 7.65, 7.75, 7.8, 7.85, 7.9, 7.95, 8,\n  ];\n  const point = phoneBorderPoint(tween(t, 6.55, 7.75, 0, 1, travel));\n  const dotX = tween(t, 7.85, 8, x + point.x * s, 240);\n  const dotY = tween(t, 7.85, 8, y + point.y * s, 135);\n  const radius = key(\n    t,\n    dotTimes,\n    [4, 6, 6, 6.5, 7.5, 9.5, 12, 16, 24, 57, 160, 390],\n  );\n  return (\n    <>\n      <Layer\n        w={480}\n        h={270}\n        style={{ background: \"black\", opacity: ramp(t, 2.7, 2.9) }}\n      />\n      <Layer\n        x={x}\n        y={y}\n        w={400}\n        h={680}\n        style={{\n          transform: `scale(${s})`,\n          transformOrigin: \"0 0\",\n          opacity: ramp(t, 2.7, 3),\n          filter: `blur(${Math.sin(push * Math.PI) * 1.1}px)`,\n        }}\n      >\n        <Layer\n          w={400}\n          h={680}\n          style={{\n            border: \"1.7px solid #55584a\",\n            boxSizing: \"border-box\",\n            borderRadius: 59,\n            opacity: ramp(t, 3.65, 4.35) * (1 - 0.8 * push * (1 - pull)),\n            boxShadow: \"0 0 2px #ad926155, inset 0 0 4px #ad926122\",\n            background: \"#000\",\n          }}\n        />\n        <Layer\n          w={400}\n          h={680}\n          style={{\n            borderLeft: \"1.2px solid #e8b45a\",\n            boxSizing: \"border-box\",\n            borderBottom: \"1.2px solid #e8b45a\",\n            borderRadius: 59,\n            opacity: ramp(t, 6.55, 7.2),\n            maskImage: \"linear-gradient(0deg, black, transparent 34%)\",\n            boxShadow: \"-1px 1px 3px #d59b4044\",\n          }}\n        />\n        <div style={{ opacity: 1 - ramp(t, 7.78, 7.96), fontWeight: 500 }}>\n          <PhoneUI {...props} />\n        </div>\n      </Layer>\n      <Layer\n        w={480}\n        h={270}\n        style={{\n          opacity: Math.sin(push * Math.PI) * 0.24,\n          background:\n            \"linear-gradient(120deg, transparent 10%, #ebc47b 53%, transparent 75%)\",\n          mixBlendMode: \"screen\",\n        }}\n      />\n      <Layer\n        w={480}\n        h={270}\n        style={{\n          opacity: ramp(t, 6.1, 7),\n          background:\n            \"linear-gradient(100deg, #000 0%, transparent 43%, #0004 66%, #000 96%)\",\n        }}\n      />\n      {t >= 6.55 && (\n        <>\n          <Layer\n            x={dotX - radius * 2}\n            y={dotY - radius * 2}\n            w={radius * 4}\n            h={radius * 4}\n            style={{\n              background: \"#eed7a6\",\n              borderRadius: \"50%\",\n              filter: `blur(${Math.min(10, radius)}px)`,\n              opacity: t < 7.88 ? 0.2 : 0,\n            }}\n          />\n          <Layer\n            x={dotX - radius}\n            y={dotY - radius}\n            w={radius * 2}\n            h={radius * 2}\n            style={{\n              background: \"#fff\",\n              borderRadius: \"50%\",\n              boxShadow: \"0 0 4px #f6e3bf\",\n            }}\n          />\n        </>\n      )}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/scenes/phone.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/scenes/price.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { ramp, travel, tween } from \"../motion\";\nimport { AssetIcon, Layer, lightMuted as muted } from \"../ui\";\n\nexport function Price({ t, content: c, theme }: SceneProps) {\n  const zoom = tween(t, 11.65, 12.25, 1, 2.7, travel);\n  const targetX = tween(t, 11.65, 12.25, 240, 277, travel);\n  const typed =\n    t < 11.84\n      ? \"$\"\n      : c.limitPrice.slice(\n          0,\n          Math.floor(tween(t, 11.84, 12.12, 1, c.limitPrice.length, (v) => v)),\n        );\n\n  const alpha = ramp(t, 10.9, 11.18);\n\n  return (\n    <>\n      <Layer\n        w={480}\n        h={270}\n        style={{\n          background: `linear-gradient(145deg, ${theme.paper}, #ebe1ce 65%, #f7f0e3)`,\n        }}\n      />\n      <Layer\n        x={240 - targetX * zoom}\n        y={135 - 135 * zoom}\n        w={480}\n        h={270}\n        style={{\n          transform: `scale(${zoom})`,\n          transformOrigin: \"0 0\",\n          color: \"#28281f\",\n        }}\n      >\n        <div style={{ opacity: alpha, fontWeight: 500 }}>\n          <Layer x={100} y={61}>\n            <AssetIcon size={30} color={theme.accent} />\n          </Layer>\n          <Layer x={140} y={63} style={{ fontSize: 12 }}>\n            {c.ticker}\n            <div style={{ marginTop: 2, color: muted, fontSize: 9 }}>\n              {c.openInterest}\n            </div>\n          </Layer>\n          <Layer\n            x={300}\n            y={65}\n            w={79}\n            style={{ textAlign: \"right\", fontSize: 12 }}\n          >\n            {c.marketPrice}\n            <div style={{ marginTop: 3, color: \"#326846\", fontSize: 9 }}>\n              {c.change}\n            </div>\n          </Layer>\n          <Layer\n            x={100}\n            y={110}\n            w={279}\n            h={0.6}\n            style={{ background: \"#c5bba466\" }}\n          />\n          <Layer\n            x={100}\n            y={158}\n            w={279}\n            h={0.6}\n            style={{ background: \"#c5bba444\" }}\n          />\n          <Layer x={117} y={120} style={{ fontSize: 11 }}>\n            Limit price\n            <div style={{ marginTop: 4, fontSize: 8, color: muted }}>\n              +3.80% above market\n            </div>\n          </Layer>\n          <Layer x={100} y={181} w={279} style={{ display: \"flex\", gap: 6 }}>\n            {[\"+1%\", \"+5%\", \"+10%\", \"+20%\"].map((s) => (\n              <div\n                key={s}\n                style={{\n                  width: 66,\n                  height: 21,\n                  borderRadius: 5,\n                  border: \"0.5px solid #cbbda282\",\n                  background: \"#ffffff24\",\n                  display: \"grid\",\n                  placeItems: \"center\",\n                  fontSize: 9,\n                }}\n              >\n                {s}\n              </div>\n            ))}\n          </Layer>\n        </div>\n        <Layer\n          x={225}\n          y={122}\n          w={96}\n          h={28}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"flex-end\",\n            transform: `translateX(${tween(t, 10.9, 11.18, -39, 0)}px)`,\n            gap: 5,\n            fontSize: 12,\n            fontWeight: 600,\n            letterSpacing: -0.35,\n          }}\n        >\n          <span style={{ opacity: alpha }}>{typed}</span>\n          <span\n            style={{\n              width: 1.5,\n              height: 19,\n              background: theme.accent,\n              opacity: 1,\n            }}\n          />\n          <span style={{ color: \"#865616\", marginLeft: -1, opacity: alpha }}>\n            Mid\n          </span>\n        </Layer>\n      </Layer>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/scenes/price.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/scenes/slider.tsx",
      "content": "import type { SceneProps } from \"../content\";\nimport { contraction, key, money, ramp, tween } from \"../motion\";\nimport { Chevron, Layer, lightMuted as muted } from \"../ui\";\n\nexport function Slider({ t, theme, content }: SceneProps) {\n  const label = t < 8.65;\n  const barW =\n    t < 10.4833\n      ? key(\n          t,\n          [8.65, 8.8, 9, 9.2, 9.3, 9.55, 9.8, 10.05, 10.3, 10.4833],\n          [3500, 2600, 1800, 820, 464, 322, 292, 276, 255, 220],\n        )\n      : tween(t, 10.4833, 10.8833, 220, 2, contraction);\n  const barH = key(\n    t,\n    [8.65, 8.8, 9, 9.2, 9.3, 9.55, 9.8, 10.3, 10.5],\n    [650, 400, 154, 66, 35, 24, 22, 20, 19],\n  );\n  const centerX = tween(t, 10.45, 10.8833, 240, 250, contraction);\n  const price = key(t, [9.3, 9.55, 9.8, 10.05, 10.3], [79, 79.5, 80, 81, 82]);\n  const quantity = key(\n    t,\n    [9.3, 9.55, 9.8, 10.05, 10.3],\n    [40, 72, 112, 144, 160],\n  );\n  const percent = Math.round((quantity / 160) * 100);\n  const detailAlpha = ramp(t, 9.15, 9.4) * (1 - ramp(t, 10.3, 10.56));\n  const uiScale = key(t, [9.3, 9.55, 9.8, 10.3], [1.6, 1.1, 1, 0.93]);\n  const roll = tween(t, 8.18, 8.55, 0, 1, (v) => v);\n  const knobSize = barH * 0.77;\n  return (\n    <>\n      <Layer\n        w={480}\n        h={270}\n        style={{\n          background: label\n            ? \"white\"\n            : `linear-gradient(145deg, ${theme.paper}, #ebe1ce 65%, #f7f0e3)`,\n        }}\n      />\n      {label ? (\n        <Layer\n          x={130}\n          y={116}\n          w={220}\n          h={38}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            gap: 9,\n            color: \"#865616\",\n            fontSize: 23,\n            letterSpacing: -0.6,\n            opacity: ramp(t, 8.01, 8.1),\n          }}\n        >\n          <span style={{ transform: \"rotate(90deg)\", display: \"flex\" }}>\n            <Chevron color={theme.accent} size={16} />\n          </span>\n          <div\n            style={{\n              width: 78,\n              height: 35,\n              position: \"relative\",\n              overflow: \"visible\",\n            }}\n          >\n            <Layer y={-roll * 35} style={{ opacity: 1 - roll }}>\n              Market\n            </Layer>\n            <Layer y={(1 - roll) * 35} style={{ opacity: roll }}>\n              Limit\n            </Layer>\n          </div>\n        </Layer>\n      ) : (\n        <>\n          <Layer\n            x={centerX - barW / 2}\n            y={135 - barH / 2}\n            w={barW}\n            h={barH}\n            style={{\n              background: `linear-gradient(100deg, #c78a30, ${theme.accent})`,\n              borderRadius: Math.min(9, barH / 3),\n              boxShadow:\n                t < 10.7\n                  ? \"inset 0 0.5px 1px #f3d8a3, 0 1px 2px #8d6a301f\"\n                  : undefined,\n            }}\n          >\n            <Layer\n              x={\n                barW *\n                  key(t, [8.65, 9.2, 9.3, 10.3], [0.5, 0.57, 0.58, 0.955]) -\n                knobSize / 2\n              }\n              y={(barH - knobSize) / 2}\n              w={knobSize}\n              h={knobSize}\n              style={{\n                background: \"#fff\",\n                borderRadius: \"50%\",\n                boxShadow: \"0 1px 3px #4d3b2126\",\n                opacity: 1 - ramp(t, 10.4, 10.65),\n              }}\n            />\n          </Layer>\n          <Layer\n            x={240}\n            y={135}\n            style={{\n              transform: `scale(${uiScale})`,\n              opacity: detailAlpha,\n              color: \"#28281f\",\n              fontSize: 9,\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            <Layer\n              x={-146}\n              y={-65}\n              w={292}\n              style={{\n                display: \"flex\",\n                justifyContent: \"center\",\n                gap: 7,\n                fontSize: 11,\n              }}\n            >\n              <span>Limit price</span>\n              <span>\n                {money(price)}{\" \"}\n                <span style={{ color: muted }}>\n                  (+{(((price - 79) / 79) * 100).toFixed(2)}%)\n                </span>\n              </span>\n            </Layer>\n            <Layer x={-142} y={-31} style={{ fontSize: 13, color: \"#5b5548\" }}>\n              {quantity.toFixed(2)} {content.ticker}\n            </Layer>\n            <Layer\n              x={113}\n              y={-31}\n              w={30}\n              style={{\n                textAlign: \"right\",\n                fontSize: 13,\n                color: \"#865616\",\n                fontWeight: 600,\n              }}\n            >\n              {percent}%\n            </Layer>\n            <Layer\n              x={-146}\n              y={25}\n              w={292}\n              style={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                fontSize: 13,\n              }}\n            >\n              <span style={{ color: muted }}>Est. profit</span>\n              <span style={{ color: \"#326846\" }}>\n                {money(quantity * (price - 75))}\n              </span>\n            </Layer>\n            <Layer\n              x={-128}\n              y={53}\n              w={274}\n              style={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                fontSize: 12,\n              }}\n            >\n              <span style={{ color: muted }}>Details</span>\n              <span>&lt;0.01% fee ﹀</span>\n            </Layer>\n          </Layer>\n        </>\n      )}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/scenes/slider.tsx"
    },
    {
      "path": "registry/remocn-templates/fomo-limit-orders/ui.tsx",
      "content": "import type { CSSProperties, ReactNode } from \"react\";\nimport type { FomoTheme } from \"./content\";\n\nexport function Layer({\n  x = 0,\n  y = 0,\n  w,\n  h,\n  style,\n  children,\n}: {\n  x?: number;\n  y?: number;\n  w?: number | string;\n  h?: number | string;\n  style?: CSSProperties;\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: x,\n        top: y,\n        width: w,\n        height: h,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\nexport function AssetIcon({\n  size = 40,\n  color = \"#e8b45a\",\n}: {\n  size?: number;\n  color?: string;\n}) {\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 40 40\" aria-hidden>\n      <circle\n        cx=\"20\"\n        cy=\"20\"\n        r=\"20\"\n        fill=\"#242720\"\n        stroke=\"#ffffff0b\"\n        strokeWidth=\"0.5\"\n      />\n      <path d=\"M9 25h5v6H9Zm8-8h5v14h-5Zm8-8h6v22h-6Z\" fill={color} />\n    </svg>\n  );\n}\nexport function Chevron({\n  color = \"white\",\n  size = 16,\n  up = false,\n}: {\n  color?: string;\n  size?: number;\n  up?: boolean;\n}) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      style={{ transform: up ? \"rotate(-90deg)\" : undefined }}\n      aria-hidden\n    >\n      <path\n        d=\"m5 5 7 7-7 7m8-14 7 7-7 7\"\n        fill=\"none\"\n        stroke={color}\n        strokeWidth=\"2.6\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\nexport function Badge({\n  children,\n  theme,\n}: {\n  children: ReactNode;\n  theme: FomoTheme;\n}) {\n  return (\n    <span\n      style={{\n        color: theme.positive,\n        background: `${theme.positive}20`,\n        padding: \"2px 5px\",\n        borderRadius: 3,\n        fontSize: 12,\n        fontWeight: 600,\n      }}\n    >\n      {children}\n    </span>\n  );\n}\nexport const row: CSSProperties = { display: \"flex\", alignItems: \"center\" };\nexport const muted = \"#aaa79d\";\nexport const lightMuted = \"#6a6357\";\n",
      "type": "registry:component",
      "target": "components/remocn/templates/fomo-limit-orders/ui.tsx"
    }
  ],
  "type": "registry:component"
}