[{"data":1,"prerenderedAt":1223},["ShallowReactive",2],{"lab-pt-br-google-ai-mode-rainbow-rim":3,"i-simple-icons:github":1191,"i-lucide:arrow-up-right":1195,"i-lucide:loader":1197,"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-logos:javascript":1217,"i-material-symbols:content-copy-outline":1219,"i-lucide:hash":1221},{"id":4,"title":5,"body":6,"date":1177,"description":1178,"draft":1179,"extension":1180,"machineTranslated":1181,"meta":1182,"navigation":1181,"path":1183,"seo":1184,"stem":1185,"tags":1186,"translationKey":1189,"__hash__":1190},"labs\u002Fpt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim.md","A borda arco-íris do Google que segue o cursor",{"type":7,"value":8,"toc":1167},"minimark",[9,13,16,24,29,37,169,176,187,191,201,480,487,491,497,650,697,700,703,717,724,727,730,758,773,776,798,802,813,817,820,828,835,850,853,860,1075,1086,1089,1095,1102,1105,1114,1118,1121,1156,1163],[10,11,12],"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.",[10,14,15],{},"Desmontei o CSS para descobrir como. Acabou sendo cinco ideias empilhadas uma\nsobre a outra, e só uma delas é um truque de verdade.",[17,18,21],"lab-demo",{"caption":19,"title":20},"Passe o mouse e deslize por ele — depois inverta a direção.","Botão AI Mode",[22,23],"ai-mode-button",{},[25,26,28],"h2",{"id":27},"_1-não-é-uma-borda","1. Não é uma borda",[10,30,31,32,36],{},"A primeira surpresa: nada aqui desenha uma borda. A camada de brilho preenche a\npílula ",[33,34,35],"strong",{},"inteira",", e então uma pílula interna opaca — recuada em exatamente um\npixel — é pintada por cima.",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"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","",[45,46,47,97,132,151],"code",{"__ignoreMap":43},[48,49,52,56,60,64,68,72,76,79,82,84,88,90,93],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"sXEfR",".",[48,57,59],{"class":58},"slAiF","glow",[48,61,63],{"class":62},"s9td2","    {",[48,65,67],{"class":66},"s9r1l"," position",[48,69,71],{"class":70},"scI-1",":",[48,73,75],{"class":74},"s1NLD"," absolute",[48,77,78],{"class":70},";",[48,80,81],{"class":66}," inset",[48,83,71],{"class":70},[48,85,87],{"class":86},"sIwlr"," 0",[48,89,78],{"class":70},[48,91,92],{"class":62}," }",[48,94,96],{"class":95},"s5acS","      \u002F* rainbow fills the pill *\u002F\n",[48,98,100,102,105,108,110,112,114,116,118,120,123,127,129],{"class":50,"line":99},2,[48,101,55],{"class":54},[48,103,104],{"class":58},"surface",[48,106,107],{"class":62}," {",[48,109,67],{"class":66},[48,111,71],{"class":70},[48,113,75],{"class":74},[48,115,78],{"class":70},[48,117,81],{"class":66},[48,119,71],{"class":70},[48,121,122],{"class":86}," 1",[48,124,126],{"class":125},"s2CoJ","px",[48,128,78],{"class":70},[48,130,131],{"class":95},"      \u002F* covers all but the rim *\u002F\n",[48,133,135,138,140,144,148],{"class":50,"line":134},3,[48,136,137],{"class":66},"           background",[48,139,71],{"class":70},[48,141,143],{"class":142},"sJICf"," #",[48,145,147],{"class":146},"sr7DH","303134",[48,149,150],{"class":70},";\n",[48,152,154,157,159,162,164,166],{"class":50,"line":153},4,[48,155,156],{"class":66},"           border-radius",[48,158,71],{"class":70},[48,160,161],{"class":86}," 100",[48,163,126],{"class":125},[48,165,78],{"class":70},[48,167,168],{"class":62}," }\n",[10,170,171,172,175],{},"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 ",[45,173,174],{},"filter: blur(2px)"," a essa superfície\ninterna, o que suaviza a aresta e deixa o aro sangrar um pouco para dentro.",[10,177,178,179,182,183,186],{},"Nenhuma matemática de anel com ",[45,180,181],{},"mask-composite",", nenhum ",[45,184,185],{},"border-image",", nenhum\ntraço SVG. Só oclusão.",[25,188,190],{"id":189},"_2-um-arco-íris-pintado-uma-vez-só-rotacionado","2. Um arco-íris, pintado uma vez, só rotacionado",[10,192,193,194,197,198,71],{},"As cores vêm de um único elemento circular carregando um ",[45,195,196],{},"conic-gradient",". Ele\nnunca é recolorido em tempo de execução — a única coisa que muda é o seu\n",[45,199,200],{},"rotate",[38,202,204],{"className":40,"code":203,"language":42,"meta":43,"style":43},".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",[45,205,206,216,234,249,272,286,351,413,474],{"__ignoreMap":43},[48,207,208,210,213],{"class":50,"line":51},[48,209,55],{"class":54},[48,211,212],{"class":58},"wheel",[48,214,215],{"class":62}," {\n",[48,217,218,221,223,225,229,232],{"class":50,"line":99},[48,219,220],{"class":66},"  aspect-ratio",[48,222,71],{"class":70},[48,224,122],{"class":86},[48,226,228],{"class":227},"sh-sn"," \u002F ",[48,230,231],{"class":86},"1",[48,233,150],{"class":70},[48,235,236,239,241,244,247],{"class":50,"line":134},[48,237,238],{"class":66},"  border-radius",[48,240,71],{"class":70},[48,242,243],{"class":86}," 50",[48,245,246],{"class":125},"%",[48,248,150],{"class":70},[48,250,251,254,256,260,263,267,270],{"class":50,"line":153},[48,252,253],{"class":66},"  rotate",[48,255,71],{"class":70},[48,257,259],{"class":258},"sfnAe"," var",[48,261,262],{"class":62},"(",[48,264,266],{"class":265},"sAiw0","--wheel",[48,268,269],{"class":62},")",[48,271,150],{"class":70},[48,273,275,278,280,283],{"class":50,"line":274},5,[48,276,277],{"class":66},"  background",[48,279,71],{"class":70},[48,281,282],{"class":258}," conic-gradient",[48,284,285],{"class":62},"(\n",[48,287,289,292,295,298,300,303,305,308,311,313,315,317,320,323,325,327,329,332,335,337,339,341,343,346,348],{"class":50,"line":288},6,[48,290,291],{"class":142},"    #",[48,293,294],{"class":146},"3186ff",[48,296,297],{"class":86}," 34",[48,299,246],{"class":125},[48,301,302],{"class":70},",",[48,304,143],{"class":142},[48,306,307],{"class":146},"9378ff",[48,309,310],{"class":86}," 37",[48,312,246],{"class":125},[48,314,302],{"class":70},[48,316,143],{"class":142},[48,318,319],{"class":146},"f96bd6",[48,321,322],{"class":86}," 39",[48,324,246],{"class":125},[48,326,302],{"class":70},[48,328,143],{"class":142},[48,330,331],{"class":146},"fc413d",[48,333,334],{"class":86}," 41",[48,336,246],{"class":125},[48,338,302],{"class":70},[48,340,143],{"class":142},[48,342,331],{"class":146},[48,344,345],{"class":86}," 48",[48,347,246],{"class":125},[48,349,350],{"class":70},",\n",[48,352,354,356,359,361,363,365,367,370,373,375,377,379,382,385,387,389,391,394,397,399,401,403,406,409,411],{"class":50,"line":353},7,[48,355,291],{"class":142},[48,357,358],{"class":146},"ff6b2b",[48,360,243],{"class":86},[48,362,246],{"class":125},[48,364,302],{"class":70},[48,366,143],{"class":142},[48,368,369],{"class":146},"fec700",[48,371,372],{"class":86}," 52",[48,374,246],{"class":125},[48,376,302],{"class":70},[48,378,143],{"class":142},[48,380,381],{"class":146},"ffdb0f",[48,383,384],{"class":86}," 56",[48,386,246],{"class":125},[48,388,302],{"class":70},[48,390,143],{"class":142},[48,392,393],{"class":146},"88de42",[48,395,396],{"class":86}," 58",[48,398,246],{"class":125},[48,400,302],{"class":70},[48,402,143],{"class":142},[48,404,405],{"class":146},"0ebc5f",[48,407,408],{"class":86}," 61",[48,410,246],{"class":125},[48,412,350],{"class":70},[48,414,416,418,420,423,425,427,429,432,435,437,439,441,444,447,449,451,453,455,458,460,462,464,466,468,470,472],{"class":50,"line":415},8,[48,417,291],{"class":142},[48,419,405],{"class":146},[48,421,422],{"class":86}," 65",[48,424,246],{"class":125},[48,426,302],{"class":70},[48,428,143],{"class":142},[48,430,431],{"class":146},"2eaab2",[48,433,434],{"class":86}," 70",[48,436,246],{"class":125},[48,438,302],{"class":70},[48,440,143],{"class":142},[48,442,443],{"class":146},"00a9bb",[48,445,446],{"class":86}," 72",[48,448,246],{"class":125},[48,450,302],{"class":70},[48,452,143],{"class":142},[48,454,294],{"class":146},[48,456,457],{"class":86}," 73",[48,459,246],{"class":125},[48,461,302],{"class":70},[48,463,143],{"class":142},[48,465,294],{"class":146},[48,467,161],{"class":86},[48,469,246],{"class":125},[48,471,269],{"class":62},[48,473,150],{"class":70},[48,475,477],{"class":50,"line":476},9,[48,478,479],{"class":62},"}\n",[10,481,482,483,486],{},"Repare que a parte interessante ocupa só de 34% a 73% da volta — 140° de 360°.\nTodo o resto é ",[45,484,485],{},"#3186ff"," chapado: um único arco de 220° de azul atravessando a\nemenda de 0°\u002F360°. Esse preenchimento importa mais adiante.",[25,488,490],{"id":489},"_3-um-gradiente-cônico-usado-como-máscara-recorta-o-cometa","3. Um gradiente cônico usado como máscara recorta o cometa",[10,492,493,494,71],{},"O pai da roda a mascara até sobrar um único arco, usando mais dois gradientes\ncônicos combinados com ",[45,495,496],{},"mask-composite: intersect",[38,498,500],{"className":40,"code":499,"language":42,"meta":43,"style":43},".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",[45,501,502,511,519,556,589,634,646],{"__ignoreMap":43},[48,503,504,506,509],{"class":50,"line":51},[48,505,55],{"class":54},[48,507,508],{"class":58},"window",[48,510,215],{"class":62},[48,512,513,516],{"class":50,"line":99},[48,514,515],{"class":66},"  mask-image",[48,517,518],{"class":70},":\n",[48,520,521,524,526,530,532,534,537,539,541,544,546,548,550,552,554],{"class":50,"line":134},[48,522,523],{"class":258},"    conic-gradient",[48,525,262],{"class":62},[48,527,529],{"class":528},"s4Nsh","from",[48,531,259],{"class":258},[48,533,262],{"class":62},[48,535,536],{"class":265},"--window",[48,538,269],{"class":62},[48,540,302],{"class":70},[48,542,543],{"class":74}," transparent",[48,545,87],{"class":86},[48,547,302],{"class":70},[48,549,543],{"class":74},[48,551,243],{"class":86},[48,553,246],{"class":125},[48,555,350],{"class":70},[48,557,558,561,564,566,568,571,574,576,578,580,583,585,587],{"class":50,"line":153},[48,559,560],{"class":74},"                   black",[48,562,563],{"class":86}," 68",[48,565,246],{"class":125},[48,567,302],{"class":70},[48,569,570],{"class":74}," black",[48,572,573],{"class":86}," 75",[48,575,246],{"class":125},[48,577,302],{"class":70},[48,579,543],{"class":74},[48,581,582],{"class":86}," 89",[48,584,246],{"class":125},[48,586,269],{"class":62},[48,588,350],{"class":70},[48,590,591,593,595,597,599,601,603,605,607,609,612,614,616,618,620,622,624,626,628,630,632],{"class":50,"line":274},[48,592,523],{"class":258},[48,594,262],{"class":62},[48,596,529],{"class":528},[48,598,259],{"class":258},[48,600,262],{"class":62},[48,602,536],{"class":265},[48,604,269],{"class":62},[48,606,302],{"class":70},[48,608,570],{"class":74},[48,610,611],{"class":86}," 30",[48,613,246],{"class":125},[48,615,302],{"class":70},[48,617,543],{"class":74},[48,619,243],{"class":86},[48,621,246],{"class":125},[48,623,302],{"class":70},[48,625,570],{"class":74},[48,627,434],{"class":86},[48,629,246],{"class":125},[48,631,269],{"class":62},[48,633,150],{"class":70},[48,635,636,639,641,644],{"class":50,"line":288},[48,637,638],{"class":66},"  mask-composite",[48,640,71],{"class":70},[48,642,643],{"class":74}," intersect",[48,645,150],{"class":70},[48,647,648],{"class":50,"line":353},[48,649,479],{"class":62},[10,651,652,653,656,657,660,661,664,665,668,669,672,673,676,677,680,681,684,685,688,689,692,693,696],{},"Converta os stops para graus e a interseção não é o arco apertado que parece.\n",[45,654,655],{},"intersect"," compõe as camadas com ",[45,658,659],{},"source-in"," de Porter-Duff, então onde os dois\ngradientes fazem rampa os alfas se ",[33,662,663],{},"multiplicam",". Isso deixa uma cauda longa e\nquadraticamente suave: o alfa sai do zero em ",[33,666,667],{},"180°",", sobe devagar no começo —\no produto de duas rampas ascendentes — chega ao máximo em ",[33,670,671],{},"252°",", mantém um\nplatô até ",[33,674,675],{},"270°"," e depois cai até ",[33,678,679],{},"320°",". Isso é um cometa de ",[33,682,683],{},"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 (",[45,686,687],{},"transparent 62%, black 82%","), então começa em ",[33,690,691],{},"223°"," e atinge o pico em ",[33,694,695],{},"295°",", bem\ndepois do platô do brilho.",[10,698,699],{},"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.",[10,701,702],{},"Então o efeito inteiro se resume a dois ângulos:",[704,705,706,712],"ul",{},[707,708,709,711],"li",{},[45,710,536],{}," — onde o cometa está",[707,713,714,716],{},[45,715,266],{}," — quais cores estão embaixo dele",[25,718,720,721],{"id":719},"_4-o-truque-de-verdade-scale-7-15","4. O truque de verdade: ",[45,722,723],{},"scale: 7 1.5",[10,725,726],{},"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.",[10,728,729],{},"O Google resolve isso escalando o elemento mascarado de forma não uniforme:",[38,731,733],{"className":40,"code":732,"language":42,"meta":43,"style":43},".window { scale: 7 1.5; }\n",[45,734,735],{"__ignoreMap":43},[48,736,737,739,741,743,746,748,751,754,756],{"class":50,"line":51},[48,738,55],{"class":54},[48,740,508],{"class":58},[48,742,107],{"class":62},[48,744,745],{"class":66}," scale",[48,747,71],{"class":70},[48,749,750],{"class":86}," 7",[48,752,753],{"class":86}," 1.5",[48,755,78],{"class":70},[48,757,168],{"class":62},[10,759,760,761,764,765,768,769,772],{},"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",[45,762,763],{},"(110 \u002F 7, −22 \u002F 1.5)"," ≈ ",[45,766,767],{},"(15.7, −14.7)",", o que é só ",[33,770,771],{},"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.",[10,774,775],{},"Isso também torna o mapeamento do cursor direto: desfaça a escala e pegue o\nângulo.",[38,777,781],{"className":778,"code":779,"language":780,"meta":43,"style":43},"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",[45,782,783,788,793],{"__ignoreMap":43},[48,784,785],{"class":50,"line":51},[48,786,787],{},"const angle = Math.atan2(px \u002F scaleX, -py \u002F scaleY) * 180 \u002F Math.PI;\n",[48,789,790],{"class":50,"line":99},[48,791,792],{},"const window = angle - 286;   \u002F\u002F 286° sits between the bloom plateau (252–270°)\n",[48,794,795],{"class":50,"line":134},[48,796,797],{},"                              \u002F\u002F and the core peak (295°)\n",[25,799,801],{"id":800},"_5-duas-cópias-para-o-brilho","5. Duas cópias para o brilho",[10,803,804,805,808,809,812],{},"A pilha inteira é renderizada duas vezes dentro da pílula: uma com\n",[45,806,807],{},"filter: blur(5px)"," e uma janela de máscara larga, outra com ",[45,810,811],{},"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.",[25,814,816],{"id":815},"por-que-as-cores-dependem-da-direção","Por que as cores dependem da direção",[10,818,819],{},"Essa foi a parte que demorou mais para entender, e minha primeira resposta\nestava errada.",[10,821,822,823,827],{},"Meu palpite inicial era que a roda ficava ",[824,825,826],"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.",[10,829,830,831,834],{},"O que significa que a roda não está atrasada. Ela está ",[33,832,833],{},"travada"," à janela:",[38,836,838],{"className":778,"code":837,"language":780,"meta":43,"style":43},"wheel = window + offset;                       \u002F\u002F both rotate together\noffset = direction > 0 ? 0 : 45;               \u002F\u002F the only thing direction changes\n",[45,839,840,845],{"__ignoreMap":43},[48,841,842],{"class":50,"line":51},[48,843,844],{},"wheel = window + offset;                       \u002F\u002F both rotate together\n",[48,846,847],{"class":50,"line":99},[48,848,849],{},"offset = direction > 0 ? 0 : 45;               \u002F\u002F the only thing direction changes\n",[10,851,852],{},"Como as duas rotacionam como uma só, a fatia de arco-íris sob o cometa nunca\nderiva enquanto você desliza.",[10,854,855,856,859],{},"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 ",[33,857,858],{},"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:",[861,862,863,882],"table",{},[864,865,866],"thead",{},[867,868,869,873,876,879],"tr",{},[870,871,872],"th",{},"stop",[870,874,875],{},"faixa°",[870,877,878],{},"→ (offset 0°)",[870,880,881],{},"← (offset 45°)",[883,884,885,899,911,924,937,949,961,974,988,1004,1019,1032,1046,1061],"tbody",{},[867,886,887,891,894,897],{},[888,889,890],"td",{},"azul",[888,892,893],{},"122°",[888,895,896],{},"—",[888,898,896],{},[867,900,901,904,907,909],{},[888,902,903],{},"violeta",[888,905,906],{},"133°",[888,908,896],{},[888,910,896],{},[867,912,913,916,919,921],{},[888,914,915],{},"rosa",[888,917,918],{},"140°",[888,920,896],{},[888,922,923],{},".01",[867,925,926,929,932,934],{},[888,927,928],{},"vermelho",[888,930,931],{},"148°",[888,933,896],{},[888,935,936],{},".03",[867,938,939,941,944,946],{},[888,940,928],{},[888,942,943],{},"173°",[888,945,896],{},[888,947,948],{},".31",[867,950,951,954,956,958],{},[888,952,953],{},"laranja",[888,955,667],{},[888,957,896],{},[888,959,960],{},".43",[867,962,963,966,969,971],{},[888,964,965],{},"âmbar",[888,967,968],{},"187°",[888,970,923],{},[888,972,973],{},".58",[867,975,976,979,982,985],{},[888,977,978],{},"amarelo",[888,980,981],{},"202°",[888,983,984],{},".10",[888,986,987],{},".93",[867,989,990,993,996,999],{},[888,991,992],{},"lima",[888,994,995],{},"209°",[888,997,998],{},".18",[888,1000,1001],{},[33,1002,1003],{},"1.00",[867,1005,1006,1009,1012,1015],{},[888,1007,1008],{},"verde",[888,1010,1011],{},"220°",[888,1013,1014],{},".34",[888,1016,1017],{},[33,1018,1003],{},[867,1020,1021,1023,1026,1029],{},[888,1022,1008],{},[888,1024,1025],{},"234°",[888,1027,1028],{},".63",[888,1030,1031],{},".82",[867,1033,1034,1037,1039,1043],{},[888,1035,1036],{},"turquesa",[888,1038,671],{},[888,1040,1041],{},[33,1042,1003],{},[888,1044,1045],{},".46",[867,1047,1048,1051,1054,1058],{},[888,1049,1050],{},"ciano",[888,1052,1053],{},"259°",[888,1055,1056],{},[33,1057,1003],{},[888,1059,1060],{},".32",[867,1062,1063,1065,1068,1072],{},[888,1064,890],{},[888,1066,1067],{},"263°",[888,1069,1070],{},[33,1071,1003],{},[888,1073,1074],{},".25",[10,1076,1077,1078,1081,1082,1085],{},"Movendo para a direita, a janela cobre os graus 180°–263° da faixa — só ",[33,1079,1080],{},"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",[33,1083,1084],{},"91%",", e tudo a partir do rosa pega pelo menos um pouco de luz.",[10,1087,1088],{},"É 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.",[10,1090,1091,1092,1094],{},"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 é ",[45,1093,485],{}," 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.",[10,1096,1097,1098,1101],{},"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 ",[33,1099,1100],{},"não podem"," receber paletas independentes. Há uma única faixa, e os\noffsets só escolhem onde a luz cai nela.",[10,1103,1104],{},"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ê.",[10,1106,1107,1108,1110,1111,1113],{},"Isso também explica um detalhe de antes: aquelas duas custom properties. Se o\noffset fosse uma única constante, ",[45,1109,266],{}," seria redundante — você só precisaria\nde ",[45,1112,536],{},". 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.",[25,1115,1117],{"id":1116},"vale-roubar","Vale roubar",[10,1119,1120],{},"As ideias reutilizáveis aqui, independentes de arco-íris:",[704,1122,1123,1133,1142],{},[707,1124,1125,1128,1129,1132],{},[33,1126,1127],{},"Oclusão vence matemática de anel."," Um elemento interno opaco recuado em ",[824,1130,1131],{},"n","\npixels é uma \"borda brilhante\" mais simples e mais barata do que qualquer anel\nmascarado.",[707,1134,1135,1138,1139,1141],{},[33,1136,1137],{},"Escala não uniforme como transformação de coordenadas."," ",[45,1140,723],{},"\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.",[707,1143,1144,1147,1148,1151,1152,1155],{},[33,1145,1146],{},"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 ",[45,1149,1150],{},"\u003Cangle>"," via ",[45,1153,1154],{},"@property",", então o CSS consegue\nfazer a transição deles.",[10,1157,1158,1159,1162],{},"Abra o painel de bastidores na demo acima — o brilho fica aceso enquanto ele\nestá aberto — e arraste ",[45,1160,1161],{},"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.",[1164,1165,1166],"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":43,"searchDepth":99,"depth":99,"links":1168},[1169,1170,1171,1172,1174,1175,1176],{"id":27,"depth":99,"text":28},{"id":189,"depth":99,"text":190},{"id":489,"depth":99,"text":490},{"id":719,"depth":99,"text":1173},"4. O truque de verdade: scale: 7 1.5",{"id":800,"depth":99,"text":801},{"id":815,"depth":99,"text":816},{"id":1116,"depth":99,"text":1117},"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.",false,"md",true,{},"\u002Fpt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",{"title":5,"description":1178},"pt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",[42,196,1187,1188],"mask","reverse-engineering","google-ai-mode-rainbow-rim","uNPbPCmip0QWxGZVrxbI-hWgNp3kU-xOLC5EvFr42EA",{"left":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1194},0,24,"\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":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1196},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1198},"\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>",[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":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"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":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"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":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"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":1192,"top":1192,"width":1214,"height":1215,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1216,"hidden":1181},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":1192,"top":1192,"width":1214,"height":1214,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1218},"\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":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1220},"\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>",{"left":1192,"top":1192,"width":1193,"height":1193,"rotate":1192,"vFlip":1179,"hFlip":1179,"body":1222},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 9h16M4 15h16M10 3L8 21m8-18l-2 18\"\u002F>",1792626870753]