/* Wings-themed reveal-slider hero animation. MacBook chassis + draggable reveal slider that uncovers a Wings-branded answer overlay on top of a "what they see" coding/proctor screen. Matches Wings palette: warm cream bg, magenta accent (#B026FF), Inter Tight / Instrument Serif / JetBrains Mono. */ const { RevealScreen: WRS, MacBook: WMB } = window; const WINGS_ACCENT = "#B026FF"; // ─── the "what they see" base layer — a proctor coding screen ─── function WingsCodingScreen() { const monoStyle = { fontFamily: "'JetBrains Mono', monospace" }; return (
{/* top bar — browser chrome */}
hackerrank.com / test / two-sum
REC · 02:14 cam ✓ mic ✓
{/* two-column problem + editor */}
{/* problem pane */}
{[ { l: "Easy", c: "oklch(78% 0.16 145)" }, { l: "Array", c: "oklch(78% 0.13 220)" }, { l: "Hash Table", c: "oklch(78% 0.16 320)" }]. map((t) => {t.l} )}
01. Two Sum
Given an array of integers nums and a target integer, return the indices of the two numbers such that they add up to target.
example
input  [2,7,11,15], 9
output [0,1]
constraints
  • 2 ≤ nums.length ≤ 10⁴
  • −10⁹ ≤ nums[i] ≤ 10⁹
  • exactly one valid answer
{/* editor pane */}
● python 3 · two_sum.py autosaved
{Array.from({ length: 8 }, (_, i) =>
{i + 1}
)} 
{`# your solution\n`}
def{` `}two_sum{`(nums, target):\n`}
{`    `}{`# TODO\n`}
{`    `}pass
Run
Submit
● ready
); } // ─── the "only you see this" overlay — Wings-branded answer panel ─── function WingsAnswerOverlay() { return (
{/* titlebar */}
wings · hidden overlay ghosty
{/* body */}
▸ detected · screen capture · O(n) hash solution
{/* progress bar */} 
{`# one-pass · O(n)\n`}
def{` `}twoSum{`(nums, t):\n`}
{`  seen = {}\n`}
{`  `}for{` i, n `}in{` `}enumerate{`(nums):\n`}
{`    `}if{` t-n `}in{` seen:\n`}
{`      `}return{` [seen[t-n], i]\n`}
{`    seen[n] = i`}
⌘+K toggle ⌘+↵ insert ● invisible to share
); } function Kbd({ children, big }) { if (big) { return ( {children}); } return ( {children}); } // ─── tilted secondary panel — "ghosty log" peeking from behind the MacBook ─── function WingsGhostyLog() { return (
ghosty · log
▸ analysing screen capture…
✓ detected · leetcode 1
✓ category · array · hash
✓ language · python 3
▸ generating solution…
time O(n) · space O(n)
ready · press ⌘+↵ to insert
); } // ─── thumbtack pin — anchors panels to the "wall" (page background) ─── function Pin({ corner = "top-left" }) { const pos = { "top-left": { top: -10, left: -10 }, "top-right": { top: -10, right: -10 }, "bottom-left": { bottom: -10, left: -10 }, "bottom-right": { bottom: -10, right: -10 }, }[corner]; // unique gradient id per corner so multiple pins don't conflict const gid = `pinhead-${corner}`; return ( {/* metal shaft going into wall */} {/* drop shadow ring under head */} {/* head */} {/* shine */} ); } // ─── shortcuts panel — same size as ghosty log, listing hotkeys ─── function WingsShortcutsPanel() { return (
shortcuts · hotkeys
); } function Shortcut({ keys, moveKeys, label, danger }) { const KbdSm = ({ children }) => ( {children} ); return (
{moveKeys ? (
⌘ +
↑ ← ↓ →
) : (
{keys.map((k, i) => ( {i > 0 && +} {k} ))}
)} {label}
); } function KbdMini({ children }) { return ( {children} ); } // ─── the assembled hero animation ─── // Renders the MacBook + reveal slider at a fixed design size, then scales it // with CSS transform so it always fits its parent container. function WingsRevealHero() { // design size — wider canvas so the two pinned side panels live in the side // margins (not behind the MacBook) const designW = 1640; const designH = 820; // MacBook screen size — bigger, so the LeetCode content fits comfortably const macScreenW = 1080; const macScreenH = 640; // container ref → measure → compute scale const wrapRef = React.useRef(null); const [scale, setScale] = React.useState(1); React.useEffect(() => { const update = () => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const s = Math.min(r.width / designW, r.height / designH); setScale(s); }; update(); const ro = new ResizeObserver(update); if (wrapRef.current) ro.observe(wrapRef.current); window.addEventListener("resize", update); return () => { ro.disconnect(); window.removeEventListener("resize", update); }; }, []); return (
{/* absolute-positioned so it does NOT contribute to parent grid track min-content */}
{/* ─── MacBook centered, on a middle z-index ─── */}
} overlay={
} accent={WINGS_ACCENT} labelFont="'Inter Tight', sans-serif" leftLabel="What they see" rightLabel="Only you see this" />
{/* ─── LEFT panel: shortcuts/hotkeys — pinned to the wall ─── */}
{/* ─── RIGHT panel: ghosty log — pinned to the wall ─── */}
{/* ─── ghosty mascot, floating just above the MacBook lid ─── */}
{/* ─── floating callout labels ─── */} what they see only you see this ✦ {/* ─── drag hint, sitting in the laptop chin area ─── */}
← drag the slider to reveal →
); } window.WingsRevealHero = WingsRevealHero;