Gimmicks 2

01

Etichetele apar pe rând

Staggered entrance · sibling-index() + IntersectionObserver

Când lista ajunge pe ecran, etichetele sar la locul lor una după alta, ca un val. Întârzierea fiecăreia o calculează CSS-ul din poziția ei în listă.

Magazine online
Plată cu cardul
Ramburs
Mai multe țări
Aplicații interne
Comenzi
Livrări
Documente
Stoc
Automatizări
Facturi
AWB-uri
E-mailuri
Rapoarte
Asistenți AI
Răspund la telefon
Preiau rezervări
Citesc documente

Complexitate: 1 din 20
Bun pentru: Liste de servicii, etichete, beneficii, logo-uri de clienți.
Merge pe: Apariția: toate browserele. sibling-index(): iPhone Safari 26.2+, Android Chrome 138+. Altfel: JavaScript dă ordinea. „Reduce motion”: lista e afișată direct.

02

Titlurile se împing

Sticky group headers · position: sticky + scroll-state()

Titlul grupului stă lipit sus cât derulezi prin grup, apoi următorul titlu îl împinge afară, ca în agenda telefonului. Pe Android, titlul lipit se și colorează.

Aplicații și platforme 2 PROIECTE

GDI Electric CabPrețurile zilei și borderoul care se completează din poza buletinului.
CreathorCursuri, plată cu cardul și factură emisă automat, într-un singur loc.

Magazine online 2 PROIECTE

INEOMagazinul nostru, pe mai multe țări: RO și FR.
Telefoane MureșConstruit și lansat de la zero, cu configurator de produse.

Site-uri de prezentare 7 PROIECTE

FixLand GeodesyTopografie și cadastru, cu magazin de echipamente.
AxaContContabilitate. Partener din 2020, acum lucrăm la SEO.
Barbura & BarburaAvocați, drept penal și comercial.
doWell InstalațiiInstalații termice, frigorifice, tratarea apei.
TermolinkÎncălzire și climatizare, cu cerere de ofertă.
RatusderaDezinsecție, dezinfecție și deratizare.
Vulcanizare Mobilă SîrbuService care vine la client, WhatsApp la un clic.

Complexitate: 2 din 20
Bun pentru: Liste lungi: meniuri de restaurant, catalog pe categorii, întrebări pe teme, program pe zile.
Merge pe: Lipirea: toate browserele. Culoarea la lipire (scroll-state): Android Chrome 133+. iPhone și Firefox: titlul rămâne deschis la culoare.

03

Bara de sticlă

Glass panel · backdrop-filter: blur() saturate()

O bară plutește jos pe ecran, iar pozele trec pe sub ea încețoșate, ca prin sticlă mată. Același limbaj ca bara de jos din iOS 26.

Vulcanizare Mobilă Sîrbu, pagina principală

Portofoliu11 site-uri live

Vezi toate

Complexitate: 3 din 20
Bun pentru: Bara de coș, butonul de rezervare, filtre care plutesc peste poze.
Merge pe: iPhone (Safari 9+ cu prefix, 18+ fără), Android Chrome 76+, Firefox 103+. Altfel: bară albă, opacă.

04

Marginea care se rotește

Animated gradient border · @property <angle> + conic-gradient

O lumină albastru-roșie aleargă pe marginea cardului, cu o strălucire discretă în spate. Atrage privirea spre o singură ofertă, fără să mai adaugi nimic.

Promisiunea 01

Demo gratuit, înainte de orice

Îl construim pe banii noștri. Dacă nu te convinge, nu ne datorezi nimic.

Vreau demo-ul gratuit

Complexitate: 4 din 20
Bun pentru: Pachetul recomandat, oferta lunii, un singur buton important.
Merge pe: iPhone (Safari 16.4+), Android Chrome 85+, Firefox 128+. Altfel și la „Reduce motion”: marginea colorată stă pe loc.

05

Butonul răspunde la deget

Tap ripple + spring press · pointer position + linear() easing

Apasă butoanele. Se strâng sub deget și revin cu un mic arc, iar din punctul atins pornește un val. Pe Android, telefonul vibrează scurt.

Demo: butoanele nu trimit nimic.

Complexitate: 5 din 20
Bun pentru: Butoanele principale: „Adaugă în coș”, „Rezervă”, „Sună acum”.
Merge pe: Toate browserele. Arcul (linear()): iPhone Safari 17.2+, Android Chrome 113+, Firefox 112+. Vibrația: doar Android.

06

Cardul se întoarce

3D card flip · rotateY + backface-visibility

Atinge un card. Se întoarce ca o carte de joc și pe spate găsești ce am construit. Mai atinge o dată și revine.

Complexitate: 6 din 20
Bun pentru: Echipă (poză / bio), produse (poză / specificații), întrebări (întrebare / răspuns).
Merge pe: Toate browserele. „Reduce motion”: fața se schimbă instant.

07

Straturi în adâncime

Parallax depth layers · translate on a named view-timeline

Derulează peste panou. Fiecare strat se mișcă cu altă viteză: site-ul din spate încet, cardul din față repede. Ochiul citește asta ca adâncime.

Fig. 07 · Creathor, după

Clientul cumpără și primește

Plată cu cardul
Acces la curs
Factura, automat

Fără intervenție

Complexitate: 7 din 20
Bun pentru: Hero-ul de pe prima pagină, prezentarea unui produs, o poveste „înainte și după”.
Merge pe: iPhone (Safari 26+), Android Chrome 115+. Altfel: straturile stau pe loc.

08

Literele se adună

Kinetic typography · per-letter scroll-driven translate + rotate

Literele vin din toate părțile și se așază în frază cât derulezi. Dacă te întorci, se împrăștie din nou.

Dacă îl poți descrie, îl putem construi.

Lucrăm cu AI și cu cele mai bune unelte de pe piață, așa că lucruri care înainte cereau o echipă și câteva luni se fac acum în zile sau săptămâni.

Complexitate: 8 din 20
Bun pentru: Un singur titlu pe pagină: sloganul, promisiunea, numele campaniei.
Merge pe: iPhone (Safari 26+), Android Chrome 115+. Altfel: titlu normal. Cititorul de ecran aude fraza întreagă.

09

Întrebările se deschid lin

Accordion to height: auto · ::details-content + interpolate-size / grid 0fr→1fr

Atinge o întrebare. Răspunsul se desface lin până la înălțimea lui reală, iar cea deschisă înainte se închide singură. Fără JavaScript.

Cât costă?

Depinde de ce construim, așa că nu-ți dăm un preț din burtă. Îți arătăm întâi demo-ul gratuit, apoi primești un preț fix pentru ce am stabilit, care nu crește pe parcurs.

Lucrăm deja cu o agenție. Are sens să vorbim?

Da. Mulți ne cheamă pentru ce agenția nu face: aplicații interne, automatizări, AI. Nu trebuie să schimbi nimic ca să vezi demo-ul.

Cât durează?

Modificările mici sunt de multe ori gata în aceeași zi sau a doua zi. Proiectele mari durează mai mult, pentru că trebuie făcute cum trebuie, și îți spunem termenul înainte să începem.

AI-ul nu greșește?

Poate greși, de aceea îl construim cu verificări: acolo unde contează, un om confirmă cu un clic. AI-ul face munca repetitivă, decizia rămâne la voi.

Complexitate: 9 din 20
Bun pentru: Întrebări frecvente, detalii de produs, livrare și retur, program.
Merge pe: Android Chrome 131+ (height: auto real). iPhone Safari 18.4+ (prin grid). Altfel: se deschide instant. Căutarea în pagină găsește și textul închis.

10

Banda care prinde viteză

Velocity marquee · CSS animation + playbackRate from scroll speed

Numele clienților trec încet prin bandă. Derulează repede și banda accelerează, derulează în sus și se întoarce. Butonul o oprește de tot.

GDI Electric Cab
Creathor
AxaCont
Barbura & Barbura
FixLand Geodesy
Telefoane Mureș
doWell
Termolink
Cafizzio
Magic House
GDI Electric Cab
Creathor
AxaCont
Barbura & Barbura
FixLand Geodesy
Telefoane Mureș
doWell
Termolink
Cafizzio
Magic House

Complexitate: 10 din 20
Bun pentru: Logo-uri de clienți, branduri vândute, orașe de livrare.
Merge pe: Toate browserele. „Reduce motion”: numele stau pe loc, pe mai multe rânduri.

11

Cuvântul e o fereastră

Zoom-through text mask · mix-blend-mode: screen + scale on view-timeline

Poza umple tot cadrul. Cât derulezi, camera se retrage prin litera „I” și poza rămâne doar în interiorul cuvântului.

GDIELECTRICCAB.RO · SITE-UL, ÎN LITERE

Complexitate: 11 din 20
Bun pentru: Deschiderea unei pagini de proiect, numele unei colecții, un singur cuvânt mare.
Merge pe: iPhone (Safari 26+), Android Chrome 115+. Altfel: cuvântul cu poza în litere, fără zoom.

12

Lanterna

Touch spotlight · radial mask-image at pointer position

Panoul e întunecat. Trage cu degetul în lateral peste el și o lanternă luminează textul de sub deget. Dacă nu atingi, lanterna se plimbă singură.

Fig. 12 · Ce nu se vede

Ce faceți acum de mână, cu copy-paste, se face singur.

FACTURI
AWB-URI
E-MAILURI
RAPOARTE

Complexitate: 12 din 20
Bun pentru: Un mesaj „ascuns” de descoperit, o hartă, o poză de detaliu (material, textură).
Merge pe: iPhone (Safari 15.4+), Android Chrome 120+, Firefox 53+. „Reduce motion”: textul e luminat tot.

13

Explicația lipită de cuvânt

Anchor-positioned popover · popover + position-area + @starting-style

Atinge un cuvânt subliniat. Explicația apare chiar deasupra lui, sau dedesubt dacă nu are loc. Se închide cu o atingere în afară, cu Escape sau cu butonul „Înapoi” al telefonului.

Facem și partea pe care clientul nu o vede: generate din comandă, completate din buletin, corect pentru reclame și pagini citite corect de .

AWBDocumentul de transport al coletului. Îl generăm direct din comandă, fără să mai copiezi adresa pe site-ul curierului.

Borderou de achizițieActul completat când firma cumpără de la o persoană. La GDI Electric Cab, echipa pozează buletinul și borderoul se completează singur.

TrackingCodul care spune platformelor de reclame ce s-a vândut. Fără el, reclamele învață din clicuri, nu din comenzi.

Asistenți AIÎn Franța, Google răspunde deja la căutări cu AI și recomandă produse direct în răspuns. Vine și în România.

Complexitate: 13 din 20
Bun pentru: Termeni tehnici, mărimi, „ce înseamnă livrare în 24h”, condiții de ofertă.
Merge pe: Lipirea de cuvânt: iPhone (Safari 26+), Android Chrome 125+. Popover: toate browserele din 2024. Altfel: explicația apare în mijlocul ecranului.

14

Cardul urmărește telefonul

Gyroscope tilt · DeviceOrientationEvent + requestPermission()

Apasă butonul, permite accesul la mișcare și înclină telefonul: cardul se înclină odată cu el, cu un reflex de lumină. Fără senzor, trage cu degetul în lateral peste card.

Partener din 2020AxaCont · contabilitate

Complexitate: 14 din 20
Bun pentru: Card de membru, voucher, produs „de ținut în mână”, o copertă.
Merge pe: iPhone (Safari 13+, cere permisiune la fiecare vizită, doar pe https), Android Chrome. Desktop și „Reduce motion”: înclinare doar cu degetul / mouse-ul, sau deloc.

15

Meniul care te urmărește

Scroll-spy chips · sticky nav + active chip from scroll position

Bara cu etichete stă lipită sus. Pe măsură ce derulezi, eticheta secțiunii în care ești se aprinde și bara alunecă singură în lateral. Atinge o etichetă ca să sari acolo.

01 · Ce construim

Magazine online

Rapide pe telefon, cu plată cu cardul și ramburs, tracking corect pentru reclame, gata pentru mai multe țări.

INEO vinde în România și în Franța, cu prețuri, limbă și livrare pentru fiecare.

02 · Ce construim

Aplicații interne

Programul pe care nu-l găsești de cumpărat: pentru comenzi, livrări, documente, stoc sau echipă.

GDI Electric Cab: pozezi buletinul vânzătorului și borderoul de achiziție se completează singur.

03 · Ce construim

Automatizări

Facturi, AWB-uri, e-mailuri, rapoarte. Ce faceți acum de mână, cu copy-paste, se face singur.

Creathor: clientul cumpără, primește acces și factura, fără intervenție.

04 · Ce construim

Asistenți AI

La telefon, pe chat sau în spatele magazinului: răspund clienților, preiau rezervări, citesc documente.

O pensiune: asistentul răspunde la telefon și preia rezervări, legat de calendar. Echipa preia doar ce are nevoie de un om.

Complexitate: 15 din 20
Bun pentru: Meniu de restaurant pe categorii, pagină de produs lungă (descriere, specificații, recenzii), servicii.
Merge pe: Toate browserele. Fără JavaScript: etichetele rămân linkuri obișnuite.

16

Notificările se adună

Toast stack · @starting-style + swipe to dismiss

Apasă butonul: jos apar pe rând mesajele unei comenzi procesate automat și se strâng într-un teanc. Atinge teancul ca să-l desfaci, glisează un mesaj în lateral ca să-l arunci.

Exemplu: mesajele unei automatizări de comenzi. Nu se trimite nimic.

Complexitate: 16 din 20
Bun pentru: „Adăugat în coș”, „Salvat”, confirmări în aplicații interne, stări de comandă.
Merge pe: Toate browserele. Intrarea animată (@starting-style): iPhone Safari 17.5+, Android Chrome 117+, Firefox 129+. Cititorul de ecran anunță fiecare mesaj.

17

Foaia de jos

Bottom sheet · native <dialog> + swipe to close + history state

O foaie urcă de jos, ca în aplicații. O închizi trăgând de bara de sus în jos, atingând zona întunecată, cu „Înapoi” al telefonului sau cu Escape. Focusul revine pe buton.

Complexitate: 17 din 20
Bun pentru: Filtre în magazin, alegerea mărimii, coș rapid, formular scurt de programare.
Merge pe: Toate browserele (dialog din 2022). Urcarea animată: iPhone Safari 17.5+, Android Chrome 117+, Firefox 129+. Altfel: apare direct.

18

Trage ca să ordonezi

Drag to reorder · pointer capture + FLIP + keyboard fallback

Ține apăsat pe cele trei linii din dreapta și trage rândul în sus sau în jos. Celelalte își fac loc. Cu tastatura: focus pe mâner și săgețile sus / jos.

Ce ar ajuta firma ta mai întâi?

1Magazin online
2Aplicație internă
3Automatizări
4Asistent AI
5SEO și reclame

Ordinea ta: Magazin online, Aplicație internă, Automatizări, Asistent AI, SEO și reclame.

Complexitate: 18 din 20
Bun pentru: Chestionare de prioritizare, ordinea produselor în admin, liste de sarcini, playlist.
Merge pe: Toate browserele (pointer events). Tastatura și cititorul de ecran au varianta cu săgeți.

19

Povești, ca pe Instagram

Stories viewer · scroll-snap + Web Animations progress + tap / hold

Patru proiecte, câte unul pe ecran. Pornesc singure când ajung pe ecran. Atinge dreapta pentru următorul, stânga pentru înapoi, ține apăsat ca să citești în liniște, sau glisează.

Reciclare · GDI Electric Cab
Buletinul se citește singur
Problema
Datele din buletinul fiecărui vânzător erau copiate de mână pe borderoul de achiziție.
Ce am construit
Site nou cu prețurile zilei și o aplicație internă care citește buletinul și completează borderoul.
Ce s-a schimbat
Echipa pozează actul și verifică. Restul se face singur.
Educație · Creathor
Cursuri fără pluginuri legate între ele
Problema
Site vechi, cursuri, plăți și facturi legate între ele cu pluginuri.
Ce am construit
Platformă refăcută complet: cursuri, plată cu cardul, factură emisă automat.
Ce s-a schimbat
Clientul cumpără, primește acces și factura, fără intervenție.
Asistent AI la telefonOSPITALITATE · PENSIUNE

Ospitalitate · Pensiune
Telefonul răspunde și după program
Problema
Multe apeluri, de multe ori cu aceleași întrebări, și în afara programului.
Ce am construit
Un asistent AI care răspunde la telefon și preia rezervări, legat de calendarul pensiunii.
Ce s-a schimbat
Echipa preia doar ce are nevoie de un om.
Comerț · INEO
Același stoc, două țări
Problema
Voiam să vindem și în afara României, cu același stoc.
Ce am construit
Un magazin pe mai multe țări, cu prețuri, limbă și livrare pentru fiecare.
Ce s-a schimbat
Vinde în România și în Franța. Testăm pe banii noștri ce le recomandăm clienților.

Complexitate: 19 din 20
Bun pentru: Studii de caz scurte, colecții noi, „o zi la noi”, pașii unei rețete sau ai unui montaj.
Merge pe: Toate browserele. „Reduce motion”: nu pornesc singure; atingi sau glisezi ca să treci mai departe.

20

Altă pagină, aceeași mișcare

Cross-document view transitions · @view-transition + pageswap / pagereveal

Atinge un proiect. Se deschide o pagină nouă, cu adresa ei, dar poza și titlul zboară în locul lor ca într-o aplicație. „Înapoi” face mișcarea invers. Merge pe orice site, fără framework.

Telefoane MureșTELEFOANE NOI ȘI RECONDIȚIONATE

AxaContCONTABILITATE · PARTENER DIN 2020

Vulcanizare Mobilă SîrbuSERVICE MOBIL · SIBIU

Complexitate: 20 din 20
Bun pentru: Magazin: listă → produs. Portofoliu: proiect → studiu de caz. Orice site cu pagini separate.
Merge pe: iPhone (Safari 18.2+), Android Chrome 126+. Firefox și „Reduce motion”: navigare normală, fără animație.