[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b5c2d4fa9c8191ad2954d10460a580","versionInt","title","Instagram Vs Google Ads — Brand-lift Decision App (react)","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Sparkles, ThumbsUp, LineChart, Settings2, Info, Timer, Gauge, HandCoins, Heart, PlayCircle, Infinity as InfinityIcon } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\n// =============================================\n// Instagram vs Google Ads — Brand-Lift Decision\n// =============================================\n// Decision rule:\n// MEPS = LIFT_IG × CPBL_GA\n// with LIFT_IG ≈ β · TAS · (1 + a_like·ln(1 + likes/1k)\n// + a_comment·ln(1 + comments/1k)\n// + a_share·ln(1 + shares/1k)) · F\n// Solve for minimum likes required to justify production cost.\n// UI goals implemented here:\n// - Wide, uncluttered layout (core sliders visible; the rest under Advanced)\n// - True scale metaphor: both options share the same tilting base; the winner is DOWN\n// - Winner also scales up slightly to feel heavier\n// - Sliders show white filled portion (left) on dark background\n// =============================================\n\nexport default function BrandDecisionApp() {\n // --- Core inputs (simplified) ---\n const [productionCost, setProductionCost] = useState(80000); // SEK\n const [cpbl, setCpbl] = useState(40000); // SEK per brand-lift point (Google Ads comparator)\n\n // Expected likes estimator (core)\n const [followers, setFollowers] = useState(100000);\n const [likeRate, setLikeRate] = useState(0.02); // 2%\n const [overrideLikes, setOverrideLikes] = useState(0); // advanced manual expected likes (0 => estimator)\n\n // --- Advanced inputs ---\n // Attention (Instagram asset)\n const [plays, setPlays] = useState(20000);\n const [avgWatchSeconds, setAvgWatchSeconds] = useState(6);\n // Engagement\n const [comments, setComments] = useState(120);\n const [shares, setShares] = useState(180);\n // Weights + conversion slope (can be calibrated)\n const [beta, setBeta] = useState(8e-6);\n const [aLike, setALike] = useState(0.25);\n const [aComment, setAComment] = useState(0.8);\n const [aShare, setAShare] = useState(1.2);\n // Context factors\n const [familiarity, setFamiliarity] = useState(0.33); // 0 = Unknown, 1 = Established\n const [eveningWeekend, setEveningWeekend] = useState(true);\n\n // Toggle\n const [showAdvanced, setShowAdvanced] = useState(false);\n\n // Derived\n const TAS = useMemo(() => Math.max(0, Math.round(plays * avgWatchSeconds)), [plays, avgWatchSeconds]);\n const familiarityFactor = useMemo(() => 2.0 - familiarity, [familiarity]); // Unknown→2.0, Established→1.0\n const timingFactor = eveningWeekend ? 1.15 : 1.0;\n const F = useMemo(() => familiarityFactor * timingFactor, [familiarityFactor, timingFactor]);\n\n const estimatedLikes = useMemo(() => Math.round(followers * likeRate), [followers, likeRate]);\n const expectedLikes = overrideLikes > 0 ? overrideLikes : estimatedLikes;\n\n // Core math: required likes threshold\n const { likesRequired, liftNeeded, mPerUnit } = useMemo(() => {\n const liftNeeded = cpbl > 0 ? productionCost / cpbl : Infinity; // points needed\n const m = beta * Math.max(0, TAS) * Math.max(0.1, F); // protect vs 0\n const K = aComment * Math.log(1 + Math.max(0, comments) / 1000) + aShare * Math.log(1 + Math.max(0, shares) / 1000);\n let likesReq = Infinity;\n if (m > 0 && aLike > 0) {\n const rhs = (liftNeeded / m) - 1 - K;\n const lnTerm = rhs / aLike;\n if (isFinite(lnTerm)) {\n const expTerm = Math.exp(lnTerm);\n likesReq = 1000 * (expTerm - 1);\n if (likesReq < 0) likesReq = 0;\n }\n }\n return { likesRequired: isFinite(likesReq) ? Math.ceil(likesReq) : Infinity, liftNeeded, mPerUnit: m };\n }, [productionCost, cpbl, beta, TAS, F, aComment, comments, aShare, shares, aLike]);\n\n // Decision\n const decisionIG = expectedLikes >= likesRequired && isFinite(likesRequired);\n\n // Pretty formatters\n const fmtInt = (n) => new Intl.NumberFormat().format(Math.round(n));\n const fmtMoney = (n) => new Intl.NumberFormat(undefined, { style: \"currency\", currency: \"SEK\", maximumFractionDigits: 0 }).format(Math.round(n));\n const fmtPct = (n) => `${(n * 100).toFixed(1)}%`;\n\n // Animated confetti-like sparkles when IG wins\n const [burst, setBurst] = useState(0);\n useEffect(() => { if (decisionIG) setBurst((b) => b + 1); }, [decisionIG]);\n\n // Narrative \"because Y\"\n const becauseText = useMemo(() => {\n if (!isFinite(likesRequired)) return \"The current inputs make the break-even undefined (check CPBL, β, or attention).\";\n const bits = [];\n bits.push(`Your production cost of ${fmtMoney(productionCost)} requires ${liftNeeded.toFixed(2)} brand-lift points at ${fmtMoney(cpbl)} per point.`);\n bits.push(`With β×TAS×F = ${(mPerUnit).toFixed(3)} and current comments/shares, the model implies a minimum of ${fmtInt(likesRequired)} likes to break even.`);\n if (overrideLikes > 0) bits.push(`You forecast ${fmtInt(expectedLikes)} likes.`);\n else bits.push(`From ${fmtInt(followers)} followers × a ${fmtPct(likeRate)} like-rate, you might expect ~${fmtInt(estimatedLikes)} likes.`);\n return bits.join(\" \");\n }, [likesRequired, productionCost, cpbl, liftNeeded, mPerUnit, overrideLikes, expectedLikes, followers, likeRate, estimatedLikes]);\n\n // Scale metaphor: one shared base tilts toward the winner.\n const ratio = isFinite(likesRequired) ? (expectedLikes - likesRequired) / Math.max(1, likesRequired) : 0;\n const tiltMag = Math.max(0, Math.min(12, Math.abs(ratio) * 12));\n const tilt = decisionIG ? -tiltMag : tiltMag; // IG left side lowers if IG wins\n\n // Nudge & scale for weight\n const yIG = decisionIG ? 10 : -6;\n const yGA = decisionIG ? -6 : 10;\n const sIG = decisionIG ? 1.06 : 0.98;\n const sGA = decisionIG ? 0.98 : 1.06;\n\n return (\n

\n {/* Header */}\n

\n \n \n \n

Instagram vs Google Ads — Brand-Lift Decision

A focused, wide layout with the key sliders up front.

\n \n Shared base tilts toward the recommended option; winner drops & scales.\n

\n\n {/* Wide grid: core controls + result */}\n

\n {/* Core Controls */}\n \n \n

\n \n

Core sliders

\n \n Advanced\n

\n\n

\n } />\n } />\n fmtInt(n)} icon={} />\n

\n Typical like-rate\n

\n 0%\n setLikeRate(Number(v[0]))} min={0} max={0.1} step={0.001} />\n 10%\n

Estimated likes: {fmtInt(estimatedLikes)}

\n\n \n {showAdvanced && (\n \n {/* Advanced expectations */}\n

Expected likes override

\n } step={50} min={0} />\n

\n\n {/* Attention */}\n

Attention (Instagram)

\n } step={1000} min={0} />\n } step={1} min={0} />\n

Total attentive seconds: {fmtInt(TAS)}

\n\n {/* Engagement */}\n

Engagement

\n } step={10} min={0} />\n } step={10} min={0} />\n

\n\n {/* Context & calibration */}\n

Context & Calibration

\n Brand familiarity\n

\n Unknown\n setFamiliarity(Number(v[0]))} min={0} max={1} step={0.01} />\n Established\n

Multiplier F: {F.toFixed(2)}

\n\n

\n \n Evening / weekend exposure\n

\n\n

\n \n \n \n \n

\n \n )}\n \n \n \n\n {/* Results */}\n \n \n

\n \n {/* Scale beam & pivot behind cards */}\n \n\n

\n {/* Instagram side */}\n \n

Instagram

\n {decisionIG && (\n Recommended\n )}\n

Break-even likes needed

\n \n {isFinite(likesRequired) ? fmtInt(likesRequired) : Undefined}\n \n

If your post reaches at least this many likes (given your other inputs), its brand-lift value meets the production spend.

\n \n\n {/* Google Ads side */}\n \n

Google Ads

\n {!decisionIG && (\n Recommended\n )}\n

Current expected likes

\n \n {fmtInt(expectedLikes)}\n \n

If you expect fewer likes than the break-even threshold, consider shifting the spend into Google Ads.

\n \n

\n \n\n {/* Big statement */}\n

\n \n

\n\n {/* Because Y */}\n \n

Because

{becauseText}

\n \n\n {/* Sparkle bursts when IG wins */}\n \n {decisionIG && (\n \n {[...Array(14)].map((_, i) => (\n \n \n \n ))}\n \n )}\n \n\n

\n\n {/* Footer strip with quick facts */}\n

\n \n \n \n \n

\n \n \n

\n\n {/* Tiny help */}\n

\n Tip: Keep the core sliders for fast decisions. Toggle Advanced to refine attention, engagement, and calibration for your brand.\n

\n );\n}\n\nfunction SliderRow({ label, value, setValue, min, max, step, format, icon }){\n return (\n

\n {icon}{label}\n

\n {format(min)}\n setValue(Number(v[0]))} min={min} max={max} step={step} />\n {format(max)}\n

Current: {format(value)}

\n );\n}\n\nfunction LabeledNumber({ value, onChange, label, icon, step = 1, min = 0, max = Number.POSITIVE_INFINITY }) {\n return (\n

\n {icon}{label}\n onChange(Number(e.target.value))} className=\"bg-slate-950/60 border-slate-800/80 text-slate-100 placeholder:text-slate-400\" />\n

\n );\n}\n\nfunction LabeledSmall({ value, onChange, label, step = 0.01, min = 0, max = 10 }) {\n return (\n

\n {label}\n onChange(Number(e.target.value))} className=\"h-8 text-xs bg-slate-950/60 border-slate-800/80 text-slate-100 placeholder:text-slate-400\" />\n

\n );\n}\n\nfunction Fact({ label, value }) {\n return (\n

\n {label}:\n {value}\n

\n );\n}\n\nfunction ThisOrThat({ decisionIG, likesRequired, expectedLikes }) {\n const winner = decisionIG ? \"Instagram\" : \"Google Ads\";\n const verb = decisionIG ? \"Prioritise\" : \"Consider\";\n const color = decisionIG ? \"text-emerald-300\" : \"text-cyan-300\";\n\n return (\n \n

This or That

\n You need {Number.isFinite(likesRequired) ? likesRequired.toLocaleString() : \"–\"} likes on this post — otherwise {winner} wins.\n

\n {verb} {winner}, because your expected likes of {expectedLikes.toLocaleString()} {decisionIG ? \"exceed\" : \"fall short of\"} the break-even threshold.\n

\n\n {/* Progress bar toward threshold */}\n

\n \n

\n 0\n {expectedLikes.toLocaleString()} likes\n {Number.isFinite(likesRequired) ? likesRequired.toLocaleString() : \"–\"} needed\n

\n \n );\n}\n\n// Visual scale base: beam + pivot, inherits parent's rotation\nfunction ScaleBeam(){\n return (\n

\n {/* Beam */}\n

\n {/* Pivot */}\n

\n {/* Base */}\n

\n );\n}\n\n// White-filled slider for dark UI\nfunction WhiteSlider({ value, onValueChange, min = 0, max = 100, step = 1 }){\n return (\n \n \n \n \n \n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","3380452688055089780","traceTime",1779777138552]