// Tehnologija

Theatre.js za vizuelnu koreografiju 3D scena

Theatre.js je timeline editor koji se otvori u browseru — dizajner i developer rade animaciju zajedno, bez slanja JSON-a.

Pošalji upit Sve 3D usluge

Theatre.js je open-source alat koji ubacuje pravi animation timeline panel direktno u sajt tokom development-a. Razlika od GSAP-a je ko diše animaciju — GSAP je code-first (developer piše kod), Theatre je editor-first (dizajner ili developer crta krive na vremenskoj liniji). Eksportuje state u JSON koji se onda učitava na produkciji. Korisno na projektima gde je animacija glavni deliverable (motion graphics agencije, premium portfolio), manje korisno na projektima gde je 3D samo sporedan element. Ne zamenjuje GSAP — često se koriste zajedno: Theatre za scene-level keyframe-ove, GSAP za scroll-trigger logiku.

Šta dobijate

Konkretan deliverable: theatre js koreografija integrisan u realan produkcijski sajt, ne demo. Integracija ima device-tier detekciju, slabi telefoni dobiju lakšu verziju automatski. Izvorni fajlovi se predaju u originalnim formatima — Blender, GLSL, glTF — pa svaki budući developer može da nastavi tamo gde sam stao.

Kako to radi u praksi

Na tipičnom projektu, theatre js koreografija stiže kao samostalni modul: jedan entry-point JS fajl, jedan CSS, asset bundle ispod 1.5MB ukupno. Integracija je sandbox — ostatak sajta ostaje SEO-friendly klasičan HTML. Frame budget: 60 FPS na srednjem Androidu, sa merljivim fallback režimom ispod toga.

Performance budget

Lighthouse mobile cilj: 85+ u svim kategorijama. Merim na realnim uređajima, ne samo emulatoru. Asset kompresija: glTF + Draco za mesh-eve, KTX2 za teksture, Brotli za shaderse. Lazy-load svake theatre js koreografija scene koja nije above-the-fold da prvi paint ostane ispod 1.5s.

Kada nije isplativo

Ako je cilj jednostavan e-commerce katalog ili sadržajni blog, pun theatre js koreografija setup je prevelik — CSS hero plus statičke slike konvertuju jednako dobro za 1/10 cene. theatre js koreografija se isplati kada brand zahteva memorabilan vizuelni momenat, ili kada 3D zaista pomaže razumevanju proizvoda (konfiguratori, ture, demoi).

Često postavljana pitanja

Zašto baš ova tehnologija?

Ima najveći produkcijski ekosistem, najviše dokumentacije, i najviše iskusnih developera. Za sajt koji treba da traje 3+ godine, zrelost ekosistema je važnija od pojedinačnih feature-a.

Šta ako sledeće godine izađe nešto novo?

Pratim novi tooling i migriram kada ima smisla, ali tek pošto novi alat ima 6-9 meseci stable produkcijskih izdanja. Ne pišem klijentske sajtove na bleeding-edge alatima — to je put ka pokvarenim sajtovima.

Koliko traje izrada?

Standardni rok: 4-6 nedelja od potpisa ugovora do live sajta. Veći opseg (konfigurator, multi-scene scrollytelling) ide na 8-12 nedelja. Hitne projekte (2-3 nedelje) primam uz povećanje cene od 30-40%.

Koliko košta?

Hero 3D nadogradnja: 800-1.200 EUR. Kompletan multi-scene 3D sajt: 2.500-4.000 EUR. Konfigurator sa custom shaderima: 4.000-10.000 EUR. Sve fiksne cene, izvorni kod uključen. Plaćanje preko firme sa PDV-om.

Šta sa korisnicima na slabim telefonima?

Sajt detektuje device tier pre prve scene i servira lakšu verziju na slabom hardveru (manje čestica, jednostavniji shaderi). Uređaji bez WebGL-a dobiju statičan fallback koji čuva vizuelni jezik i konverzioni put.

Spremni za 3D iskustvo na vašem sajtu?

Recite mi šta vam treba — fiksna cena, fiksan rok, bez iznenađenja.

Pošalji upit +381 61 224 8989