[{"data":1,"prerenderedAt":1223},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-up-right":8,"i-lucide:loader":10,"lab-pt-br-google-ai-mode-rainbow-rim":12,"translations-labs-pt-br-google-ai-mode-rainbow-rim":1199,"i-material-symbols:arrow-back":1207,"i-lucide:languages":1209,"i-lucide:settings-2":1211,"i-logos:css-3":1213,"i-lucide:hash":1217,"i-logos:javascript":1219,"i-material-symbols:content-copy-outline":1221},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 2v4m4.2 1.8l2.9-2.9M18 12h4m-5.8 4.2l2.9 2.9M12 18v4m-7.1-2.9l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9\"\u002F>",{"id":13,"title":14,"body":15,"date":1186,"description":1187,"draft":6,"extension":1188,"machineTranslated":1189,"meta":1190,"navigation":1189,"path":1191,"seo":1192,"stem":1193,"tags":1194,"translationKey":1197,"__hash__":1198},"labs\u002Fpt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim.md","A borda arco-íris do Google que segue o cursor",{"type":16,"value":17,"toc":1176},"minimark",[18,22,25,33,38,46,178,185,196,200,210,489,496,500,506,659,706,709,712,726,733,736,739,767,782,785,807,811,822,826,829,837,844,859,862,869,1084,1095,1098,1104,1111,1114,1123,1127,1130,1165,1172],[19,20,21],"p",{},"O botão \"AI Mode\" do google.com faz algo adorável no hover: uma fatia de\narco-íris acende na borda e desliza junto com o cursor. Passe da esquerda para a\ndireita e ela vai de verde → turquesa → azul. Volte e ela vai de vermelho →\nlaranja → amarelo → verde. Mesmo botão, mesmo gradiente, cores diferentes.",[19,23,24],{},"Desmontei o CSS para descobrir como. Acabou sendo cinco ideias empilhadas uma\nsobre a outra, e só uma delas é um truque de verdade.",[26,27,30],"lab-demo",{"caption":28,"title":29},"Passe o mouse e deslize por ele — depois inverta a direção.","Botão AI Mode",[31,32],"ai-mode-button",{},[34,35,37],"h2",{"id":36},"_1-não-é-uma-borda","1. Não é uma borda",[19,39,40,41,45],{},"A primeira surpresa: nada aqui desenha uma borda. A camada de brilho preenche a\npílula ",[42,43,44],"strong",{},"inteira",", e então uma pílula interna opaca — recuada em exatamente um\npixel — é pintada por cima.",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-css shiki shiki-themes material-theme-lighter github-light tokyo-night",".glow    { position: absolute; inset: 0; }      \u002F* rainbow fills the pill *\u002F\n.surface { position: absolute; inset: 1px;      \u002F* covers all but the rim *\u002F\n           background: #303134;\n           border-radius: 100px; }\n","css","",[54,55,56,106,141,160],"code",{"__ignoreMap":52},[57,58,61,65,69,73,77,81,85,88,91,93,97,99,102],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sXEfR",".",[57,66,68],{"class":67},"slAiF","glow",[57,70,72],{"class":71},"s9td2","    {",[57,74,76],{"class":75},"s9r1l"," position",[57,78,80],{"class":79},"scI-1",":",[57,82,84],{"class":83},"s1NLD"," absolute",[57,86,87],{"class":79},";",[57,89,90],{"class":75}," inset",[57,92,80],{"class":79},[57,94,96],{"class":95},"sIwlr"," 0",[57,98,87],{"class":79},[57,100,101],{"class":71}," }",[57,103,105],{"class":104},"s5acS","      \u002F* rainbow fills the pill *\u002F\n",[57,107,109,111,114,117,119,121,123,125,127,129,132,136,138],{"class":59,"line":108},2,[57,110,64],{"class":63},[57,112,113],{"class":67},"surface",[57,115,116],{"class":71}," {",[57,118,76],{"class":75},[57,120,80],{"class":79},[57,122,84],{"class":83},[57,124,87],{"class":79},[57,126,90],{"class":75},[57,128,80],{"class":79},[57,130,131],{"class":95}," 1",[57,133,135],{"class":134},"s2CoJ","px",[57,137,87],{"class":79},[57,139,140],{"class":104},"      \u002F* covers all but the rim *\u002F\n",[57,142,144,147,149,153,157],{"class":59,"line":143},3,[57,145,146],{"class":75},"           background",[57,148,80],{"class":79},[57,150,152],{"class":151},"sJICf"," #",[57,154,156],{"class":155},"sr7DH","303134",[57,158,159],{"class":79},";\n",[57,161,163,166,168,171,173,175],{"class":59,"line":162},4,[57,164,165],{"class":75},"           border-radius",[57,167,80],{"class":79},[57,169,170],{"class":95}," 100",[57,172,135],{"class":134},[57,174,87],{"class":79},[57,176,177],{"class":71}," }\n",[19,179,180,181,184],{},"Só o 1px que a pílula interna não cobre sobrevive, e isso se lê como uma borda\nbrilhante. No hover o Google adiciona ",[54,182,183],{},"filter: blur(2px)"," a essa superfície\ninterna, o que suaviza a aresta e deixa o aro sangrar um pouco para dentro.",[19,186,187,188,191,192,195],{},"Nenhuma matemática de anel com ",[54,189,190],{},"mask-composite",", nenhum ",[54,193,194],{},"border-image",", nenhum\ntraço SVG. Só oclusão.",[34,197,199],{"id":198},"_2-um-arco-íris-pintado-uma-vez-só-rotacionado","2. Um arco-íris, pintado uma vez, só rotacionado",[19,201,202,203,206,207,80],{},"As cores vêm de um único elemento circular carregando um ",[54,204,205],{},"conic-gradient",". Ele\nnunca é recolorido em tempo de execução — a única coisa que muda é o seu\n",[54,208,209],{},"rotate",[47,211,213],{"className":49,"code":212,"language":51,"meta":52,"style":52},".wheel {\n  aspect-ratio: 1 \u002F 1;\n  border-radius: 50%;\n  rotate: var(--wheel);\n  background: conic-gradient(\n    #3186ff 34%, #9378ff 37%, #f96bd6 39%, #fc413d 41%, #fc413d 48%,\n    #ff6b2b 50%, #fec700 52%, #ffdb0f 56%, #88de42 58%, #0ebc5f 61%,\n    #0ebc5f 65%, #2eaab2 70%, #00a9bb 72%, #3186ff 73%, #3186ff 100%);\n}\n",[54,214,215,225,243,258,281,295,360,422,483],{"__ignoreMap":52},[57,216,217,219,222],{"class":59,"line":60},[57,218,64],{"class":63},[57,220,221],{"class":67},"wheel",[57,223,224],{"class":71}," {\n",[57,226,227,230,232,234,238,241],{"class":59,"line":108},[57,228,229],{"class":75},"  aspect-ratio",[57,231,80],{"class":79},[57,233,131],{"class":95},[57,235,237],{"class":236},"sh-sn"," \u002F ",[57,239,240],{"class":95},"1",[57,242,159],{"class":79},[57,244,245,248,250,253,256],{"class":59,"line":143},[57,246,247],{"class":75},"  border-radius",[57,249,80],{"class":79},[57,251,252],{"class":95}," 50",[57,254,255],{"class":134},"%",[57,257,159],{"class":79},[57,259,260,263,265,269,272,276,279],{"class":59,"line":162},[57,261,262],{"class":75},"  rotate",[57,264,80],{"class":79},[57,266,268],{"class":267},"sfnAe"," var",[57,270,271],{"class":71},"(",[57,273,275],{"class":274},"sAiw0","--wheel",[57,277,278],{"class":71},")",[57,280,159],{"class":79},[57,282,284,287,289,292],{"class":59,"line":283},5,[57,285,286],{"class":75},"  background",[57,288,80],{"class":79},[57,290,291],{"class":267}," conic-gradient",[57,293,294],{"class":71},"(\n",[57,296,298,301,304,307,309,312,314,317,320,322,324,326,329,332,334,336,338,341,344,346,348,350,352,355,357],{"class":59,"line":297},6,[57,299,300],{"class":151},"    #",[57,302,303],{"class":155},"3186ff",[57,305,306],{"class":95}," 34",[57,308,255],{"class":134},[57,310,311],{"class":79},",",[57,313,152],{"class":151},[57,315,316],{"class":155},"9378ff",[57,318,319],{"class":95}," 37",[57,321,255],{"class":134},[57,323,311],{"class":79},[57,325,152],{"class":151},[57,327,328],{"class":155},"f96bd6",[57,330,331],{"class":95}," 39",[57,333,255],{"class":134},[57,335,311],{"class":79},[57,337,152],{"class":151},[57,339,340],{"class":155},"fc413d",[57,342,343],{"class":95}," 41",[57,345,255],{"class":134},[57,347,311],{"class":79},[57,349,152],{"class":151},[57,351,340],{"class":155},[57,353,354],{"class":95}," 48",[57,356,255],{"class":134},[57,358,359],{"class":79},",\n",[57,361,363,365,368,370,372,374,376,379,382,384,386,388,391,394,396,398,400,403,406,408,410,412,415,418,420],{"class":59,"line":362},7,[57,364,300],{"class":151},[57,366,367],{"class":155},"ff6b2b",[57,369,252],{"class":95},[57,371,255],{"class":134},[57,373,311],{"class":79},[57,375,152],{"class":151},[57,377,378],{"class":155},"fec700",[57,380,381],{"class":95}," 52",[57,383,255],{"class":134},[57,385,311],{"class":79},[57,387,152],{"class":151},[57,389,390],{"class":155},"ffdb0f",[57,392,393],{"class":95}," 56",[57,395,255],{"class":134},[57,397,311],{"class":79},[57,399,152],{"class":151},[57,401,402],{"class":155},"88de42",[57,404,405],{"class":95}," 58",[57,407,255],{"class":134},[57,409,311],{"class":79},[57,411,152],{"class":151},[57,413,414],{"class":155},"0ebc5f",[57,416,417],{"class":95}," 61",[57,419,255],{"class":134},[57,421,359],{"class":79},[57,423,425,427,429,432,434,436,438,441,444,446,448,450,453,456,458,460,462,464,467,469,471,473,475,477,479,481],{"class":59,"line":424},8,[57,426,300],{"class":151},[57,428,414],{"class":155},[57,430,431],{"class":95}," 65",[57,433,255],{"class":134},[57,435,311],{"class":79},[57,437,152],{"class":151},[57,439,440],{"class":155},"2eaab2",[57,442,443],{"class":95}," 70",[57,445,255],{"class":134},[57,447,311],{"class":79},[57,449,152],{"class":151},[57,451,452],{"class":155},"00a9bb",[57,454,455],{"class":95}," 72",[57,457,255],{"class":134},[57,459,311],{"class":79},[57,461,152],{"class":151},[57,463,303],{"class":155},[57,465,466],{"class":95}," 73",[57,468,255],{"class":134},[57,470,311],{"class":79},[57,472,152],{"class":151},[57,474,303],{"class":155},[57,476,170],{"class":95},[57,478,255],{"class":134},[57,480,278],{"class":71},[57,482,159],{"class":79},[57,484,486],{"class":59,"line":485},9,[57,487,488],{"class":71},"}\n",[19,490,491,492,495],{},"Repare que a parte interessante ocupa só de 34% a 73% da volta — 140° de 360°.\nTodo o resto é ",[54,493,494],{},"#3186ff"," chapado: um único arco de 220° de azul atravessando a\nemenda de 0°\u002F360°. Esse preenchimento importa mais adiante.",[34,497,499],{"id":498},"_3-um-gradiente-cônico-usado-como-máscara-recorta-o-cometa","3. Um gradiente cônico usado como máscara recorta o cometa",[19,501,502,503,80],{},"O pai da roda a mascara até sobrar um único arco, usando mais dois gradientes\ncônicos combinados com ",[54,504,505],{},"mask-composite: intersect",[47,507,509],{"className":49,"code":508,"language":51,"meta":52,"style":52},".window {\n  mask-image:\n    conic-gradient(from var(--window), transparent 0, transparent 50%,\n                   black 68%, black 75%, transparent 89%),\n    conic-gradient(from var(--window), black 30%, transparent 50%, black 70%);\n  mask-composite: intersect;\n}\n",[54,510,511,520,528,565,598,643,655],{"__ignoreMap":52},[57,512,513,515,518],{"class":59,"line":60},[57,514,64],{"class":63},[57,516,517],{"class":67},"window",[57,519,224],{"class":71},[57,521,522,525],{"class":59,"line":108},[57,523,524],{"class":75},"  mask-image",[57,526,527],{"class":79},":\n",[57,529,530,533,535,539,541,543,546,548,550,553,555,557,559,561,563],{"class":59,"line":143},[57,531,532],{"class":267},"    conic-gradient",[57,534,271],{"class":71},[57,536,538],{"class":537},"s4Nsh","from",[57,540,268],{"class":267},[57,542,271],{"class":71},[57,544,545],{"class":274},"--window",[57,547,278],{"class":71},[57,549,311],{"class":79},[57,551,552],{"class":83}," transparent",[57,554,96],{"class":95},[57,556,311],{"class":79},[57,558,552],{"class":83},[57,560,252],{"class":95},[57,562,255],{"class":134},[57,564,359],{"class":79},[57,566,567,570,573,575,577,580,583,585,587,589,592,594,596],{"class":59,"line":162},[57,568,569],{"class":83},"                   black",[57,571,572],{"class":95}," 68",[57,574,255],{"class":134},[57,576,311],{"class":79},[57,578,579],{"class":83}," black",[57,581,582],{"class":95}," 75",[57,584,255],{"class":134},[57,586,311],{"class":79},[57,588,552],{"class":83},[57,590,591],{"class":95}," 89",[57,593,255],{"class":134},[57,595,278],{"class":71},[57,597,359],{"class":79},[57,599,600,602,604,606,608,610,612,614,616,618,621,623,625,627,629,631,633,635,637,639,641],{"class":59,"line":283},[57,601,532],{"class":267},[57,603,271],{"class":71},[57,605,538],{"class":537},[57,607,268],{"class":267},[57,609,271],{"class":71},[57,611,545],{"class":274},[57,613,278],{"class":71},[57,615,311],{"class":79},[57,617,579],{"class":83},[57,619,620],{"class":95}," 30",[57,622,255],{"class":134},[57,624,311],{"class":79},[57,626,552],{"class":83},[57,628,252],{"class":95},[57,630,255],{"class":134},[57,632,311],{"class":79},[57,634,579],{"class":83},[57,636,443],{"class":95},[57,638,255],{"class":134},[57,640,278],{"class":71},[57,642,159],{"class":79},[57,644,645,648,650,653],{"class":59,"line":297},[57,646,647],{"class":75},"  mask-composite",[57,649,80],{"class":79},[57,651,652],{"class":83}," intersect",[57,654,159],{"class":79},[57,656,657],{"class":59,"line":362},[57,658,488],{"class":71},[19,660,661,662,665,666,669,670,673,674,677,678,681,682,685,686,689,690,693,694,697,698,701,702,705],{},"Converta os stops para graus e a interseção não é o arco apertado que parece.\n",[54,663,664],{},"intersect"," compõe as camadas com ",[54,667,668],{},"source-in"," de Porter-Duff, então onde os dois\ngradientes fazem rampa os alfas se ",[42,671,672],{},"multiplicam",". Isso deixa uma cauda longa e\nquadraticamente suave: o alfa sai do zero em ",[42,675,676],{},"180°",", sobe devagar no começo —\no produto de duas rampas ascendentes — chega ao máximo em ",[42,679,680],{},"252°",", mantém um\nplatô até ",[42,683,684],{},"270°"," e depois cai até ",[42,687,688],{},"320°",". Isso é um cometa de ",[42,691,692],{},"140° de\nlargura"," — 39% de uma volta — a maior parte dele uma cauda muito tênue.\nA camada de núcleo nítido usa uma primeira máscara mais justa (",[54,695,696],{},"transparent 62%, black 82%","), então começa em ",[42,699,700],{},"223°"," e atinge o pico em ",[42,703,704],{},"295°",", bem\ndepois do platô do brilho.",[19,707,708],{},"Errei isso na primeira tentativa — li só o platô, chamei a janela de 68° de\nlargura e depois não consegui explicar por que uma direção mostra seis cores. A\nrampa é a história inteira.",[19,710,711],{},"Então o efeito inteiro se resume a dois ângulos:",[713,714,715,721],"ul",{},[716,717,718,720],"li",{},[54,719,545],{}," — onde o cometa está",[716,722,723,725],{},[54,724,275],{}," — quais cores estão embaixo dele",[34,727,729,730],{"id":728},"_4-o-truque-de-verdade-scale-7-15","4. O truque de verdade: ",[54,731,732],{},"scale: 7 1.5",[19,734,735],{},"Aqui está a parte que eu não esperava. Uma varredura cônica é circular. Um botão\né uma pílula larga e achatada. Rotacionar um gradiente cônico dentro de uma\npílula normalmente mandaria o destaque ao redor de uma elipse apertada, não\ndeslizando pela aresta superior comprida.",[19,737,738],{},"O Google resolve isso escalando o elemento mascarado de forma não uniforme:",[47,740,742],{"className":49,"code":741,"language":51,"meta":52,"style":52},".window { scale: 7 1.5; }\n",[54,743,744],{"__ignoreMap":52},[57,745,746,748,750,752,755,757,760,763,765],{"class":59,"line":60},[57,747,64],{"class":63},[57,749,517],{"class":67},[57,751,116],{"class":71},[57,753,754],{"class":75}," scale",[57,756,80],{"class":79},[57,758,759],{"class":95}," 7",[57,761,762],{"class":95}," 1.5",[57,764,87],{"class":79},[57,766,177],{"class":71},[19,768,769,770,773,774,777,778,781],{},"Esticar x por 7 comprime o espaço angular. Faça as contas numa pílula de 220 ×\n44: o canto superior direito da pílula fica nas coordenadas sem escala\n",[54,771,772],{},"(110 \u002F 7, −22 \u002F 1.5)"," ≈ ",[54,775,776],{},"(15.7, −14.7)",", o que é só ",[42,779,780],{},"47° fora da vertical",".\nA aresta superior inteira da pílula abrange cerca de ±47° — então uma rotação\nde bem menos de um quarto de volta leva o destaque de uma ponta à outra, e o\narco abraça a aresta em vez de parecer uma fatia de pizza.",[19,783,784],{},"Isso também torna o mapeamento do cursor direto: desfaça a escala e pegue o\nângulo.",[47,786,790],{"className":787,"code":788,"language":789,"meta":52,"style":52},"language-js shiki shiki-themes material-theme-lighter github-light tokyo-night","const angle = Math.atan2(px \u002F scaleX, -py \u002F scaleY) * 180 \u002F Math.PI;\nconst window = angle - 286;   \u002F\u002F 286° sits between the bloom plateau (252–270°)\n                              \u002F\u002F and the core peak (295°)\n","js",[54,791,792,797,802],{"__ignoreMap":52},[57,793,794],{"class":59,"line":60},[57,795,796],{},"const angle = Math.atan2(px \u002F scaleX, -py \u002F scaleY) * 180 \u002F Math.PI;\n",[57,798,799],{"class":59,"line":108},[57,800,801],{},"const window = angle - 286;   \u002F\u002F 286° sits between the bloom plateau (252–270°)\n",[57,803,804],{"class":59,"line":143},[57,805,806],{},"                              \u002F\u002F and the core peak (295°)\n",[34,808,810],{"id":809},"_5-duas-cópias-para-o-brilho","5. Duas cópias para o brilho",[19,812,813,814,817,818,821],{},"A pilha inteira é renderizada duas vezes dentro da pílula: uma com\n",[54,815,816],{},"filter: blur(5px)"," e uma janela de máscara larga, outra com ",[54,819,820],{},"filter: blur(1px)","\ne uma mais justa. A primeira é o halo, a segunda o núcleo brilhante. Juntas, dão\nprofundidade ao efeito — um filamento nítido dentro de um brilho suave.",[34,823,825],{"id":824},"por-que-as-cores-dependem-da-direção","Por que as cores dependem da direção",[19,827,828],{},"Essa foi a parte que demorou mais para entender, e minha primeira resposta\nestava errada.",[19,830,831,832,836],{},"Meu palpite inicial era que a roda ficava ",[833,834,835],"em",{},"atrasada"," em relação à janela — uma\nmola, com o resíduo trocando de sinal dependendo da direção do movimento. Isso\nproduz um tom dependente da direção, mas é dependente da velocidade: as cores\nderivam enquanto você se move e voltam ao lugar quando você desacelera. No botão\nreal, não. Deslize devagar ou rápido, a paleta de uma dada direção é\nabsolutamente estável.",[19,838,839,840,843],{},"O que significa que a roda não está atrasada. Ela está ",[42,841,842],{},"travada"," à janela:",[47,845,847],{"className":787,"code":846,"language":789,"meta":52,"style":52},"wheel = window + offset;                       \u002F\u002F both rotate together\noffset = direction > 0 ? 0 : 45;               \u002F\u002F the only thing direction changes\n",[54,848,849,854],{"__ignoreMap":52},[57,850,851],{"class":59,"line":60},[57,852,853],{},"wheel = window + offset;                       \u002F\u002F both rotate together\n",[57,855,856],{"class":59,"line":108},[57,857,858],{},"offset = direction > 0 ? 0 : 45;               \u002F\u002F the only thing direction changes\n",[19,860,861],{},"Como as duas rotacionam como uma só, a fatia de arco-íris sob o cometa nunca\nderiva enquanto você desliza.",[19,863,864,865,868],{},"Agora junte o offset com aquele cometa de 140°. Ele tem exatamente a largura da\nfaixa de cores — ambos abrangem 39% de uma volta — mas isso ",[42,866,867],{},"não"," significa\nque cada direção vê tudo, porque as duas janelas ficam em lugares diferentes.\nCalcule o alfa da máscara ao longo dos stops do Google e a assimetria é gritante:",[870,871,872,891],"table",{},[873,874,875],"thead",{},[876,877,878,882,885,888],"tr",{},[879,880,881],"th",{},"stop",[879,883,884],{},"faixa°",[879,886,887],{},"→ (offset 0°)",[879,889,890],{},"← (offset 45°)",[892,893,894,908,920,933,946,958,970,983,997,1013,1028,1041,1055,1070],"tbody",{},[876,895,896,900,903,906],{},[897,898,899],"td",{},"azul",[897,901,902],{},"122°",[897,904,905],{},"—",[897,907,905],{},[876,909,910,913,916,918],{},[897,911,912],{},"violeta",[897,914,915],{},"133°",[897,917,905],{},[897,919,905],{},[876,921,922,925,928,930],{},[897,923,924],{},"rosa",[897,926,927],{},"140°",[897,929,905],{},[897,931,932],{},".01",[876,934,935,938,941,943],{},[897,936,937],{},"vermelho",[897,939,940],{},"148°",[897,942,905],{},[897,944,945],{},".03",[876,947,948,950,953,955],{},[897,949,937],{},[897,951,952],{},"173°",[897,954,905],{},[897,956,957],{},".31",[876,959,960,963,965,967],{},[897,961,962],{},"laranja",[897,964,676],{},[897,966,905],{},[897,968,969],{},".43",[876,971,972,975,978,980],{},[897,973,974],{},"âmbar",[897,976,977],{},"187°",[897,979,932],{},[897,981,982],{},".58",[876,984,985,988,991,994],{},[897,986,987],{},"amarelo",[897,989,990],{},"202°",[897,992,993],{},".10",[897,995,996],{},".93",[876,998,999,1002,1005,1008],{},[897,1000,1001],{},"lima",[897,1003,1004],{},"209°",[897,1006,1007],{},".18",[897,1009,1010],{},[42,1011,1012],{},"1.00",[876,1014,1015,1018,1021,1024],{},[897,1016,1017],{},"verde",[897,1019,1020],{},"220°",[897,1022,1023],{},".34",[897,1025,1026],{},[42,1027,1012],{},[876,1029,1030,1032,1035,1038],{},[897,1031,1017],{},[897,1033,1034],{},"234°",[897,1036,1037],{},".63",[897,1039,1040],{},".82",[876,1042,1043,1046,1048,1052],{},[897,1044,1045],{},"turquesa",[897,1047,680],{},[897,1049,1050],{},[42,1051,1012],{},[897,1053,1054],{},".46",[876,1056,1057,1060,1063,1067],{},[897,1058,1059],{},"ciano",[897,1061,1062],{},"259°",[897,1064,1065],{},[42,1066,1012],{},[897,1068,1069],{},".32",[876,1071,1072,1074,1077,1081],{},[897,1073,899],{},[897,1075,1076],{},"263°",[897,1078,1079],{},[42,1080,1012],{},[897,1082,1083],{},".25",[19,1085,1086,1087,1090,1091,1094],{},"Movendo para a direita, a janela cobre os graus 180°–263° da faixa — só ",[42,1088,1089],{},"59%","\ndela. Tudo antes do laranja — azul, violeta, rosa, vermelho — fica fora e não é\natenuado, mas ausente. Movendo para a esquerda, a janela cobre 135°–263°, ou\n",[42,1092,1093],{},"91%",", e tudo a partir do rosa pega pelo menos um pouco de luz.",[19,1096,1097],{},"É por isso que mover para a direita se lê como um amarelo quase imperceptível\nvirando verde virando uma ponta turquesa-e-azul brilhante, enquanto mover para a\nesquerda se lê como um arco-íris completo com pico no amarelo-esverdeado. É a\nmesma faixa nas duas vezes, iluminada de forma diferente. Inverta a direção e o\noffset transita suavemente de um valor para o outro, fazendo um crossfade em vez\nde um salto.",[19,1099,1100,1101,1103],{},"Há um segundo motivo para a varredura à direita terminar tão azul. A camada de\nnúcleo nítido atinge o pico em 295°, e com offset 0° isso cai no grau 295° da\nfaixa — depois do fim da faixa em 263°, lá no preenchimento azul chapado. Então,\nmovendo para a direita, o filamento nítido é ",[54,1102,494],{}," puro e só o brilho mais\nsuave atrás dele carrega cor. Movendo para a esquerda, o mesmo pico cai em 250°,\nbem em cima do turquesa.",[19,1105,1106,1107,1110],{},"Uma consequência que vale notar se você construir um desses: as duas janelas se\nsobrepõem em 95° dos seus 140° de largura, cerca de dois terços, então as\ndireções ",[42,1108,1109],{},"não podem"," receber paletas independentes. Há uma única faixa, e os\noffsets só escolhem onde a luz cai nela.",[19,1112,1113],{},"Mas isso não é o mesmo que não ter nenhum controle por direção. Considere\n\"brilhante\" como alfa ≥ 0.9 e as duas zonas são completamente disjuntas —\nmovendo para a direita acendem os graus 245°–263° da faixa, movendo para a\nesquerda 200°–230°. Então as cores dominantes de cada direção são suas para\nescolher de forma independente; só as caudas tênues são compartilhadas. Na demo\nacima, as setas sob cada amostra mostram com que intensidade a janela do brilho\nacende aquele stop em cada direção, o que transforma \"quais cores essa direção\nmostra?\" em algo que você simplesmente lê.",[19,1115,1116,1117,1119,1120,1122],{},"Isso também explica um detalhe de antes: aquelas duas custom properties. Se o\noffset fosse uma única constante, ",[54,1118,275],{}," seria redundante — você só precisaria\nde ",[54,1121,545],{},". A segunda propriedade existe precisamente porque o offset se\nmove. E aquele arco de 219° de azul chapado no gradiente é o que impede o\ncometa de piscar uma emenda dura quando ele passa do fim da faixa — com um cometa\nde 140° sempre há um lugar seguro para ele ficar.",[34,1124,1126],{"id":1125},"vale-roubar","Vale roubar",[19,1128,1129],{},"As ideias reutilizáveis aqui, independentes de arco-íris:",[713,1131,1132,1142,1151],{},[716,1133,1134,1137,1138,1141],{},[42,1135,1136],{},"Oclusão vence matemática de anel."," Um elemento interno opaco recuado em ",[833,1139,1140],{},"n","\npixels é uma \"borda brilhante\" mais simples e mais barata do que qualquer anel\nmascarado.",[716,1143,1144,1147,1148,1150],{},[42,1145,1146],{},"Escala não uniforme como transformação de coordenadas."," ",[54,1149,732],{},"\ntransforma um espaço angular circular num que acompanha a aresta de um\nretângulo. Desfaça a escala no JS para mapear o cursor de volta.",[716,1152,1153,1156,1157,1160,1161,1164],{},[42,1154,1155],{},"Anime rotações, não cores."," Um gradiente estático mais dois ângulos é muito\nmais barato do que reconstruir gradientes a cada frame, e os dois ângulos\npodem ser registrados como ",[54,1158,1159],{},"\u003Cangle>"," via ",[54,1162,1163],{},"@property",", então o CSS consegue\nfazer a transição deles.",[19,1166,1167,1168,1171],{},"Abra o painel de bastidores na demo acima — o brilho fica aceso enquanto ele\nestá aberto — e arraste ",[54,1169,1170],{},"scale X"," para baixo em direção a 1: você pode ver o\nespaço angular se descomprimir e o destaque voltar a ser uma varredura circular.\nEsse único slider é o truque inteiro.",[1173,1174,1175],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sXEfR, html code.shiki .sXEfR{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#E0AF68}html pre.shiki code .slAiF, html code.shiki .slAiF{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#9ECE6A}html pre.shiki code .s9td2, html code.shiki .s9td2{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#9ABDF5}html pre.shiki code .s9r1l, html code.shiki .s9r1l{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#7AA2F7}html pre.shiki code .scI-1, html code.shiki .scI-1{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#89DDFF}html pre.shiki code .s1NLD, html code.shiki .s1NLD{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#FF9E64}html pre.shiki code .sIwlr, html code.shiki .sIwlr{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#FF9E64}html pre.shiki code .s5acS, html code.shiki .s5acS{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .s2CoJ, html code.shiki .s2CoJ{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F7768E}html pre.shiki code .sJICf, html code.shiki .sJICf{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#9AA5CE}html pre.shiki code .sr7DH, html code.shiki .sr7DH{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#9AA5CE}html pre.shiki code .sh-sn, html code.shiki .sh-sn{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#BB9AF7}html pre.shiki code .sfnAe, html code.shiki .sfnAe{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#0DB9D7}html pre.shiki code .sAiw0, html code.shiki .sAiw0{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#C0CAF5}html pre.shiki code .s4Nsh, html code.shiki .s4Nsh{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#89DDFF}",{"title":52,"searchDepth":108,"depth":108,"links":1177},[1178,1179,1180,1181,1183,1184,1185],{"id":36,"depth":108,"text":37},{"id":198,"depth":108,"text":199},{"id":498,"depth":108,"text":499},{"id":728,"depth":108,"text":1182},"4. O truque de verdade: scale: 7 1.5",{"id":809,"depth":108,"text":810},{"id":824,"depth":108,"text":825},{"id":1125,"depth":108,"text":1126},"2026-08-12","Como o botão \"AI Mode\" do google.com pinta um arco-íris ao longo da borda que acompanha o seu cursor — e por que as cores mudam dependendo da direção em que você se move.","md",true,{},"\u002Fpt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",{"title":14,"description":1187},"pt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",[51,205,1195,1196],"mask","reverse-engineering","google-ai-mode-rainbow-rim","uNPbPCmip0QWxGZVrxbI-hWgNp3kU-xOLC5EvFr42EA",[1200,1204],{"path":1201,"name":1202,"to":1203},"\u002Fen-gb\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim","English","\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",{"path":1205,"name":1206,"to":1205},"\u002Fsv\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim","Svenska",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1208},"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l5.6 5.6L12 20l-8-8l8-8l1.425 1.4l-5.6 5.6H20v2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1210},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1212},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M14 17H5M19 7h-9\"\u002F>\u003Ccircle cx=\"17\" cy=\"17\" r=\"3\"\u002F>\u003Ccircle cx=\"7\" cy=\"7\" r=\"3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":1214,"height":1215,"rotate":4,"vFlip":6,"hFlip":6,"body":1216,"hidden":1189},256,361,"\u003Cpath fill=\"#264DE4\" d=\"M127.844 360.088L23.662 331.166L.445 70.766h255.11l-23.241 260.36z\"\u002F>\u003Cpath fill=\"#2965F1\" d=\"m212.417 314.547l19.86-222.49H128V337.95z\"\u002F>\u003Cpath fill=\"#EBEBEB\" d=\"m53.669 188.636l2.862 31.937H128v-31.937zm-5.752-64.641l2.903 31.937H128v-31.937zM128 271.58l-.14.037l-35.568-9.604l-2.274-25.471h-32.06l4.474 50.146l65.421 18.16l.147-.04z\"\u002F>\u003Cpath d=\"M60.484 0h38.68v16.176H76.66v16.176h22.506v16.175H60.484zm46.417 0h38.681v14.066h-22.505v2.813h22.505v32.352h-38.68V34.46h22.505v-2.813H106.9zm46.418 0H192v14.066h-22.505v2.813H192v32.352h-38.681V34.46h22.505v-2.813H153.32z\"\u002F>\u003Cpath fill=\"#FFF\" d=\"m202.127 188.636l5.765-64.641H127.89v31.937h45.002l-2.906 32.704H127.89v31.937h39.327l-3.708 41.42l-35.62 9.614v33.226l65.473-18.145l.48-5.396l7.506-84.08z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1218},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 9h16M4 15h16M10 3L8 21m8-18l-2 18\"\u002F>",{"left":4,"top":4,"width":1214,"height":1214,"rotate":4,"vFlip":6,"hFlip":6,"body":1220},"\u003Cpath fill=\"#f7df1e\" d=\"M0 0h256v256H0z\"\u002F>\u003Cpath d=\"m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1222},"\u003Cpath fill=\"currentColor\" d=\"M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V6h2v14h11v2zm4-6V4z\"\u002F>",1792626870444]