[{"data":1,"prerenderedAt":1223},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-up-right":8,"i-lucide:loader":10,"lab-sv-google-ai-mode-rainbow-rim":12,"translations-labs-sv-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\u002Fsv\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim.md","Googles regnbågskant som följer markören",{"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",{},"\"AI Mode\"-knappen på google.com gör något riktigt fint vid hover: en skiva\nregnbåge tänds längs kanten och glider med din markör. Svep från vänster till\nhöger och den går grön → turkos → blå. Svep tillbaka och den går röd → orange →\ngul → grön. Samma knapp, samma gradient, olika färger.",[19,23,24],{},"Jag plockade isär CSS:en för att ta reda på hur. Det visade sig vara fem idéer\nstaplade på varandra, och bara en av dem är ett riktigt trick.",[26,27,30],"lab-demo",{"caption":28,"title":29},"Hovra och svep över den — byt sedan riktning.","AI Mode-knappen",[31,32],"ai-mode-button",{},[34,35,37],"h2",{"id":36},"_1-det-är-ingen-kant","1. Det är ingen kant",[19,39,40,41,45],{},"Den första överraskningen: ingenting här ritar en kant. Glödlagret fyller\n",[42,43,44],"strong",{},"hela"," pillret, och sedan målas ett ogenomskinligt inre piller — indraget\nexakt en pixel — ovanpå.",[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],{},"Bara den pixel som det inre pillret inte täcker överlever, och den läses som en\nglödande kant. Vid hover lägger Google till ",[54,182,183],{},"filter: blur(2px)"," på den inre\nytan, vilket mjukar upp dess kant och låter ramen blöda inåt en aning.",[19,186,187,188,191,192,195],{},"Ingen ringmatematik med ",[54,189,190],{},"mask-composite",", ingen ",[54,193,194],{},"border-image",", inget\nSVG-streck. Bara ocklusion.",[34,197,199],{"id":198},"_2-en-regnbåge-målad-en-gång-bara-roterad","2. En regnbåge, målad en gång, bara roterad",[19,201,202,203,206,207,80],{},"Färgerna kommer från ett enda cirkulärt element med en ",[54,204,205],{},"conic-gradient",". Det\nfärgas aldrig om vid körning — det enda som någonsin ändras är dess ",[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],{},"Lägg märke till att den intressanta delen bara upptar 34–73 % av varvet — 140°\nav 360°. Allt utanför det är platt ",[54,493,494],{},"#3186ff",": en enda 220° blå båge som spänner\növer skarven vid 0°\u002F360°. Den utfyllnaden spelar roll längre fram.",[34,497,499],{"id":498},"_3-en-konisk-gradient-som-mask-skär-ut-kometen","3. En konisk gradient som mask skär ut kometen",[19,501,502,503,80],{},"Hjulets förälder maskar ner det till en enda båge, med hjälp av ytterligare två\nkoniska gradienter kombinerade med ",[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],{},"Räkna om stoppen till grader och snittet är inte den snäva båge det ser ut som.\n",[54,663,664],{},"intersect"," komponerar lagren med Porter-Duff ",[54,667,668],{},"source-in",", så där båda\ngradienterna rampar ",[42,671,672],{},"multipliceras"," deras alfavärden. Det lämnar en lång,\nkvadratiskt mjuk svans: alfa lämnar noll vid ",[42,675,676],{},"180°",", stiger långsamt till en\nbörjan — produkten av två stigande ramper — når fullt vid ",[42,679,680],{},"252°",", håller en\nplatå till ",[42,683,684],{},"270°"," och faller sedan bort vid ",[42,687,688],{},"320°",". Det är en komet som är\n",[42,691,692],{},"140° bred"," — 39 % av ett varv — till största delen mycket svag svans.\nDet skarpa kärnlagret använder en snävare första mask (",[54,695,696],{},"transparent 62%, black 82%","), så den börjar vid ",[42,699,700],{},"223°"," och toppar vid ",[42,703,704],{},"295°",", långt förbi glödens\nplatå.",[19,707,708],{},"Jag fick det här fel i första försöket — jag läste bara platån, kallade\nfönstret 68° brett och kunde sedan inte förklara varför ena riktningen visar\nsex färger. Rampen är hela förklaringen.",[19,710,711],{},"Så hela effekten kokar ner till två vinklar:",[713,714,715,721],"ul",{},[716,717,718,720],"li",{},[54,719,545],{}," — var kometen är",[716,722,723,725],{},[54,724,275],{}," — vilka färger som ligger under den",[34,727,729,730],{"id":728},"_4-det-riktiga-tricket-scale-7-15","4. Det riktiga tricket: ",[54,731,732],{},"scale: 7 1.5",[19,734,735],{},"Här kommer delen jag inte väntade mig. Ett koniskt svep är cirkulärt. En knapp\när ett brett, platt piller. Att rotera en konisk gradient inuti ett piller skulle\nnormalt skicka highlighten runt en snäv ellips, inte glidande längs den långa\növerkanten.",[19,737,738],{},"Google löser det genom att skala det maskade elementet olikformigt:",[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],{},"Att sträcka x med 7 trycker ihop vinkelrummet. Räkna på ett 220 × 44-piller:\npillrets övre högra hörn ligger vid de oskalade koordinaterna\n",[54,771,772],{},"(110 \u002F 7, −22 \u002F 1.5)"," ≈ ",[54,775,776],{},"(15.7, −14.7)",", vilket bara är ",[42,779,780],{},"47° från\nvertikalen",". Pillrets hela överkant spänner över ungefär ±47° — så en rotation\npå klart under ett kvarts varv för highlighten från ena änden till den andra,\noch bågen följer kanten i stället för att se ut som en tårtbit.",[19,783,784],{},"Det gör också markörmappningen enkel: ta bort skalningen och ta vinkeln.",[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-två-kopior-för-glöden","5. Två kopior för glöden",[19,812,813,814,817,818,821],{},"Hela stacken renderas två gånger inuti pillret: en gång med ",[54,815,816],{},"filter: blur(5px)","\noch ett brett maskfönster, en gång med ",[54,819,820],{},"filter: blur(1px)"," och ett snävare. Den\nförsta är glorian, den andra den ljusa kärnan. Tillsammans ger de effekten dess\ndjup — en skarp glödtråd inuti en mjuk glöd.",[34,823,825],{"id":824},"varför-färgerna-beror-på-riktningen","Varför färgerna beror på riktningen",[19,827,828],{},"Det här var delen som tog längst tid att reda ut, och mitt första svar var fel.",[19,830,831,832,836],{},"Min första gissning var att hjulet ",[833,834,835],"em",{},"släpar efter"," fönstret — en fjäder, där\nresten byter tecken beroende på rörelseriktning. Det ger en riktningsberoende\nton, men den är hastighetsberoende: färgerna driver medan du rör dig och lägger\nsig tillbaka när du saktar ner. På den riktiga knappen gör de inte det. Svep\nlångsamt eller snabbt, paletten för en given riktning är klippfast.",[19,838,839,840,843],{},"Vilket betyder att hjulet inte släpar. Det är ",[42,841,842],{},"låst"," till fönstret:",[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],{},"Eftersom de två roterar som en enhet driver regnbågsskivan under kometen aldrig\nmedan du sveper.",[19,863,864,865,868],{},"Sätt nu ihop offseten med den där 140°-kometen. Den är exakt lika bred som\nfärgbandet — båda spänner över 39 % av ett varv — men det betyder ",[42,866,867],{},"inte"," att\nvarje riktning ser hela bandet, eftersom de två fönstren sitter på olika\nställen. Kör maskens alfa över Googles stopp och asymmetrin är slående:",[870,871,872,891],"table",{},[873,874,875],"thead",{},[876,877,878,882,885,888],"tr",{},[879,880,881],"th",{},"stopp",[879,883,884],{},"band°",[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",{},"blå",[897,901,902],{},"122°",[897,904,905],{},"—",[897,907,905],{},[876,909,910,913,916,918],{},[897,911,912],{},"violett",[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],{},"röd",[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],{},"orange",[897,964,676],{},[897,966,905],{},[897,968,969],{},".43",[876,971,972,975,978,980],{},[897,973,974],{},"bärnsten",[897,976,977],{},"187°",[897,979,932],{},[897,981,982],{},".58",[876,984,985,988,991,994],{},[897,986,987],{},"gul",[897,989,990],{},"202°",[897,992,993],{},".10",[897,995,996],{},".93",[876,998,999,1002,1005,1008],{},[897,1000,1001],{},"lime",[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],{},"grön",[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],{},"turkos",[897,1047,680],{},[897,1049,1050],{},[42,1051,1012],{},[897,1053,1054],{},".46",[876,1056,1057,1060,1063,1067],{},[897,1058,1059],{},"cyan",[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],{},"Vid rörelse åt höger täcker fönstret bandgraderna 180°–263° — bara ",[42,1088,1089],{},"59 %"," av\nbandet. Allt före orange — blå, violett, rosa, röd — ligger utanför och är inte\nnedtonat utan frånvarande. Vid rörelse åt vänster täcker fönstret 135°–263°,\neller ",[42,1092,1093],{},"91 %",", och allt från rosa och framåt fångar åtminstone lite ljus.",[19,1096,1097],{},"Det är därför rörelse åt höger läses som knappt synlig gul in i grön in i en\nljus turkos-och-blå spets, medan rörelse åt vänster läses som en hel regnbåge\nsom toppar på gulgrön. Det är samma band båda gångerna, belyst olika. Byt\nriktning och offseten glider från det ena värdet till det andra, i en\növertoning snarare än ett hopp.",[19,1099,1100,1101,1103],{},"Det finns ett andra skäl till att svepet åt höger slutar så blått. Det skarpa\nkärnlagret toppar vid 295°, och med offset 0° landar det på bandgrad 295° —\nförbi bandets slut vid 263°, ute i den platta blå utfyllnaden. Så vid rörelse\nåt höger är den skarpa glödtråden rent ",[54,1102,494],{}," och bara den mjukare glöden\nbakom den bär färg. Vid rörelse åt vänster landar samma topp på 250°, mitt på\nturkosen.",[19,1105,1106,1107,1110],{},"En konsekvens värd att notera om du bygger en sådan här: de två fönstren\növerlappar med 95° av sina 140° bredd, ungefär två tredjedelar, så riktningarna\n",[42,1108,1109],{},"kan inte"," ges oberoende paletter. Det finns ett band, och offsetarna väljer\nbara var ljuset faller på det.",[19,1112,1113],{},"Men det är inte samma sak som att sakna kontroll per riktning. Låt \"ljus\"\nbetyda alfa ≥ 0,9 och de två zonerna är helt åtskilda — rörelse åt höger tänder\nbandgraderna 245°–263°, rörelse åt vänster 200°–230°. Så varje riktnings\ndominerande färger är dina att välja oberoende; det är bara de svaga svansarna\nsom delas. I demon ovan visar pilarna under varje färgruta hur starkt glödens\nfönster lyser upp det stoppet i varje riktning, vilket gör \"vilka färger visar\nden här riktningen?\" till något du bara kan läsa av.",[19,1115,1116,1117,1119,1120,1122],{},"Det förklarar också en detalj från tidigare: de två custom properties. Om\noffseten vore en enda konstant skulle ",[54,1118,275],{}," vara överflödig — du skulle bara\nbehöva ",[54,1121,545],{},". Den andra egenskapen finns just för att offseten rör sig. Och\nden där 219° bågen av platt blått i gradienten är det som hindrar kometen från\natt blinka till med en hård skarv när den vandrar förbi bandets slut — med en\n140°-komet finns det alltid någonstans säkert för den att ligga.",[34,1124,1126],{"id":1125},"värt-att-stjäla","Värt att stjäla",[19,1128,1129],{},"De återanvändbara idéerna här, oberoende av regnbågar:",[713,1131,1132,1142,1151],{},[716,1133,1134,1137,1138,1141],{},[42,1135,1136],{},"Ocklusion slår ringmatematik."," Ett ogenomskinligt inre element indraget\n",[833,1139,1140],{},"n"," pixlar är en enklare och billigare \"glödande kant\" än någon maskad ring.",[716,1143,1144,1147,1148,1150],{},[42,1145,1146],{},"Olikformig skalning som koordinattransform."," ",[54,1149,732],{}," förvandlar ett\ncirkulärt vinkelrum till ett som följer en rektangels kant. Ta bort skalningen\ni JS för att mappa markören tillbaka.",[716,1152,1153,1156,1157,1160,1161,1164],{},[42,1154,1155],{},"Animera rotationer, inte färger."," En statisk gradient plus två vinklar är\nmycket billigare än att bygga om gradienter varje bildruta, och båda vinklarna\nkan registreras som ",[54,1158,1159],{},"\u003Cangle>"," via ",[54,1162,1163],{},"@property",", så CSS kan övergångsanimera\ndem.",[19,1166,1167,1168,1171],{},"Öppna panelen \"Visa hur det fungerar\" i demon ovan — glöden förblir tänd medan\nden är öppen — och dra ",[54,1169,1170],{},"scale X"," ner mot 1: du kan se vinkelrummet vecklas ut och highlighten\nfalla tillbaka till ett cirkulärt svep. Den enda slidern är hela tricket.",[1173,1174,1175],"style",{},"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 .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 .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. Det riktiga tricket: 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","Hur \"AI Mode\"-knappen på google.com målar en regnbåge längs sin kant som följer din markör — och varför färgerna ändras beroende på åt vilket håll du rör dig.","md",true,{},"\u002Fsv\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",{"title":14,"description":1187},"sv\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim",[51,205,1195,1196],"mask","reverse-engineering","google-ai-mode-rainbow-rim","cpSLor4pplBMHAZylm32DmqPQNJdDpRP6s5XPBnyoTg",[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},"\u002Fpt-br\u002Flabs\u002Fgoogle-ai-mode-rainbow-rim","Português",{"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>",1792626870600]