> ## Documentation Index > Fetch the complete documentation index at: https://hoopdev-docs-control-plane-owns-listeners.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Overview > Runtime control for agents export const HeroAnimation = () => { const QUERY = 'SELECT * FROM customers LIMIT 4;'; const ROWS = [{ id: 1001, name: 'J. Smith', ssn: '123-45-6789', email: 'jsmith@acme.com' }, { id: 1002, name: 'M. Rodriguez', ssn: '234-56-7890', email: 'mrodriguez@acme.com' }, { id: 1003, name: 'A. Chen', ssn: '345-67-8901', email: 'achen@acme.com' }, { id: 1004, name: 'S. Patel', ssn: '456-78-9012', email: 'spatel@acme.com' }]; const [cycle, setCycle] = useState(0); const [typedLen, setTypedLen] = useState(0); const [visibleRows, setVisibleRows] = useState(0); const [phase, setPhase] = useState('typing'); const timers = useRef([]); function T(fn, delay) { const id = setTimeout(fn, delay); timers.current.push(id); } useEffect(() => { timers.current.forEach(clearTimeout); timers.current = []; setTypedLen(0); setVisibleRows(0); setPhase('typing'); let t = 0; for (let i = 1; i <= QUERY.length; i++) { t += 38; const ci = i; T(() => setTypedLen(ci), t); } t += 350; for (let r = 1; r <= ROWS.length; r++) { const cr = r; T(() => setVisibleRows(cr), t); t += 95; } t += 900; T(() => setPhase('flashing'), t); t += 480; T(() => setPhase('masked'), t); t += 3200; T(() => setPhase('resetting'), t); t += 550; T(() => setCycle(c => c + 1), t); return () => timers.current.forEach(clearTimeout); }, [cycle]); const isMasked = phase === 'masked'; const isFlashing = phase === 'flashing'; const isResetting = phase === 'resetting'; const showRows = phase !== 'typing' && phase !== 'resetting'; return