Għamilna l-websajt tqattar, u l-browser kważi dab

Minn

·

Il-websajt ta’ Slop tqattar: qtar tal-linka mdendla minn xifer iswed fuq l-istrixxa tal-logos tal-brands, biż-żebgħa fuq il-pills u qtar jaqa’.

Forsi ndunajt biż-żebgħa. Kull tarf tal-linka fuq din il-websajt jagħmel taqtiriet li jimtlew, jitqalu, jittawlu f’ħajta u jinqatgħu, u l-istess jagħmel kull logo fl-istrixxa tal-brands li naħdmu għalihom. Il-qtar jaqa’ fuq kull ma jkun hemm taħtu (ritratt, card, buttuna) u jinfaqa’. Fuq wiċċ ċatt jibqa’ wieqaf. Fuq wieħed immejjel jiżżerżaq, ifur mit-tarf, jinżel mal-ġenb u jkompli jqattar. Kollox jispiċċa f’għadira fuq il-footer, li tibqa’ togħla sakemm tibqa’ hawn.

Il-logo tagħna huwa qatra, allura l-websajt kellha tqattar. Mhux video f’loop: żebgħa vera, maħduma live fil-browser tiegħek. Bnejniha b’Claude Code, kif tistenna minn aġenzija li l-AI tpoġġiha fuq it-tabella. Li ttella’ t-taqtiriet fuq l-iskrin kienet il-parti l-faċli. Li tagħmilhom tajbin biżżejjed biex tħallihom għaddejjin fuq websajt live kien ix-xogħol veru, u dwar dan hi din in-nota.

Taqtiriet live fuq il-websajt ta’ Slop: it-taqtiriet fuq tarf tal-linka jimtlew u jinqatgħu, waqt li l-istrixxa tal-logos tal-brands tgħaddi biż-żebgħa tqattar mill-pills.
Fig. 60 – Żebgħa live b’sittin frame fis-sekonda. L-ebda waħda minnhom mhi video.

Żebgħa li taf fejn tinsab

Kull qatra hija ġugarell żgħir tal-fiżika. Iż-żebgħa tinġabar fil-boċċa, il-boċċa titqal, u aktar ma titqal aktar tgħaġġel il-qatra, sakemm tidjieq f’għonq u tinqata’. Qatra li qed taqa’ taqra l-forma vera ta’ kull ma tolqot, kantunieri tondi u ritratti mmejla inklużi, allura ż-żebgħa fuq buttuna tonda tgħannaq il-buttuna. Tħoss il-paġna wkoll. Iskrollja l-paġna b’daqqa u l-qtar imdendel jaqa’. Għaddi l-maws fuq logo fil-home page u jogħla, u ż-żebgħa ta’ fuqu togħla miegħu.

Qabel ma xejn minnu tħalla jidher fuq il-websajt live, kellu jobdi erba’ regoli:

  • Qatt ma tfixkel. Ma tistax timblokka klikk, tgħatti test jew tnaqqas il-veloċità tal-paġna.
  • Kwieta meta titlobha. Jekk l-apparat tiegħek jitlob inqas moviment, jew il-JavaScript mitfi, tara l-paġna wieqfa bil-qtar diġà miżbugħ fuqha.
  • Żebgħa ċatta. Truf nodfa u l-istess ftit leqqa tal-logo. Bla blur, bla gradients.
  • Torqod meta xejn ma jiċċaqlaq.

Fejn ikkumplikat kollox

L-ewwel nett, l-affarijiet tondi. Ħafna minn dawk il-logos qegħdin f’buttuni forma ta’ pillola, u ż-żebgħa tħobb titkaxkar madwar it-truf tondi tagħhom. Eżatt hemmhekk il-qtar beda joħroġlu ponot jaqtgħu, qisu xi ħadd qatagħhom bl-imqass. Il-kodiċi li kien ipinġi qatra mdendla kien jassumi li l-wiċċ ta’ fuqha ċatt. Fil-qiegħ tal-pillola, hekk hu. Fuq il-kurva, kien ipinġi kunjard tielgħa mal-inklinazzjoni u strixxa rqiqa ta’ żebgħa fuq il-buttuna nnifisha. Is-soluzzjoni kienet li nħallu ż-żebgħa tiltaqa’ mal-kurva vera fuq iż-żewġ naħat, bħalma ballun irrumblat bejn il-qatra u l-wiċċ imiss it-tnejn.

Close-up ta’ żebgħa mdendla mat-tarf tond ta’ pillola b’logo. Qabel: ponta sewda li taqta’, u strixxa ċatta tidħol fil-pillola. Wara: qatra lixxa li tiltaqa’ mal-kurva.
Fig. 45° – Żebgħa fuq inklinazzjoni, qabel u wara.

Imbagħad wasalna għall-parti fejn kważi dewbet il-browser. Iktar ma kont iddum, iktar il-paġna kienet tiqal. Iż-żebgħa kienet tinġabar fuq kull ritratt u card li tiskrollja minn quddiemhom, u l-hover fuq logo kien iġiegħel l-istrixxa titfixkel. L-ewwel verżjoni mxiet fuq idea li ħafna developers jaqblu magħha: pinġi ż-żebgħa fuq ħafna canvases żgħar u erġa’ pinġi biss il-biċċiet żgħar li jinbidlu. Irriżulta bil-maqlub. Kull canvas jiswa xi ħaġa liċ-ċippa tal-grafika sempliċement talli jeżisti u jerġa’ jinpinġa, kemm jista’ jkun żgħir, u wara żjara twila kien hemm madwar 250 minnhom. Inqas canvases, ikbar, u li ma npinġux dak li ħadd ma jista’ jara, niżżluhom għal madwar 80. F’test li jiskrollja l-paġna kollha u jagħmel hover fuq tużżana logos, ix-xogħol tal-grafika niżel b’39% u l-waqfiet twal naqsu minn ħdax għal waħda.

Il-kejl kellu n-nassa tiegħu wkoll. L-ewwel qari qalilna li l-paġna kienet qed titlef 19-il frame kull sekonda. Mhux veru. Il-qtar jimxi b’60 frame fis-sekonda apposta, fuq skrin li jirrifreskja 120 darba fis-sekonda, u l-browser għadd kull frame li qbiżna bħala falliment. Faċli konna naħlu ġurnata nottimizzaw kontra dak in-numru. Iċċekkja x’ifisser numru qabel ma tiġri warajh.

Websajt tista’ jkollha personalità u xorta tkun mgħaġġla. It-trick hu li l-parti playful tittrattaha bl-istess dixxiplina bħall-partijiet boring: ittestjaha f’browser veru, irrispetta lin-nies li ma jridux moviment, u żommha ’l bogħod minn dak li ġie jagħmel il-viżitatur.

Trid li l-websajt tiegħek tħossha ftit iktar ħajja?

Miktub minn Slop – l-aġenzija tal-marketing interna u AI-native ta’ Kempu.