SS Toolbox
SS Toolbox
Všechna data jsou zpracovávána lokálně

Generátor animovaných přechodových pozadí — 11 stylů WebGL, živý náhled

Náhled jedenácti animovaných přechodových a abstraktních pozadí vykreslovaných v reálném čase přes WebGL: tekuté bloby, okolní světlo, stupňované přechody, rozmazané tečky, mřížky, krychle, vlny a trojúhelníkové mozaiky. Styl a šest zabudovaných palet přepnete okamžitě, bez nahrávání a bez serveru – je to nástroj pro živý náhled, nikoli exportér CSS nebo obrázků.

Co tento generátor pozadí skutečně nabízí

  1. Jedenáct stylů pozadí řízených shadery

    AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic a WavyWaves – všechny se nepřetržitě animují na plátně vysokém 600 pixelů.

  2. Okamžité přepnutí stylu a palety

    Vše ovládají dva rozbalovací seznamy: jeden pro styl pozadí a jeden pro paletu. Každá změna ihned znovu sestaví animaci, bez tlačítka pro generování a bez načítání stránky.

  3. Šest zabudovaných palet

    Monochrome, Red, Green, Blue, Yellow a Purple, každá je pevně daný seznam šesti hex barev. Styl se čtyřmi barvami použije jen první čtyři hodnoty, styl se šesti barvami všech šest; přebytečné barvy se oříznou.

  4. Běží lokálně na vaší GPU

    Každý snímek se vykresluje přes WebGL v prohlížeči. Nic se nenahrává, neposílá se žádný požadavek na server a animace běží dál bez síťového provozu.

  5. Hřiště pro náhled, ne exportní nástroj

    Neexistuje výstup CSS, stahování PNG nebo SVG, tlačítko náhody, přepínač šumu či textury ani uložené předvolby. Úhel, pozice barevných zarážek, vrstvení a rychlost také nejsou dostupné.

Časté otázky ke generátoru pozadí

Jaké typy přechodů jsou podporovány – lineární, radiální, konické nebo mesh?

Striktně vzato žádný z typů CSS. Tato stránka vykresluje jedenáct pozadí se shadery WebGL: AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic a WavyWaves. Několik jich vypadá jako tekuté přechody ve stylu mesh, ale jde o animace na plátně, nikoli o přechody background-image.

Co mohu upravovat?

Jen dvě věci: rozbalovací seznam stylu a rozbalovací seznam palety. Nejsou k dispozici žádné ovladače úhlu, pozice barevné zarážky, vrstev, výběru barvy, rychlosti, pozastavení ani smyčky. Palety jsou šest pevných vzorků a každý styl použije čtyři nebo šest z nich.

Mohu pozadí exportovat jako obrázek?

Ne. Na stránce nikde není toDataURL, toBlob ani logika stahování, takže plátno lze pouze prohlížet – nelze jej uložit jako PNG, JPEG ani SVG.

Generuje CSS kód, který bych mohl zkopírovat?

Ne. Neexistuje výstup CSS ani tlačítko kopírování. Tato pozadí jsou plátna WebGL, nikoli přechody background-image, takže je nelze zredukovat na úryvek CSS; k tomu potřebujete samostatný nástroj pro CSS přechody.

Jsou tu předvolby, náhodné generování, šum nebo uložená nastavení?

Jedinými předvolbami je šest zabudovaných palet. Není tu tlačítko náhody (seed je pevně nastaven na 1000), žádná volba šumu či textury a nic se neukládá do místního úložiště – po obnovení stránky se vrátíte k AbstractShape s první paletou.

Co se stane, když přepnu styl nebo paletu?

Každá změna vytvoří novou instanci pozadí a přidá další plátno do stejného kontejneru; stará instance se nikdy nezničí, takže se vrší několik pláten se stejným id a vidíte to nejnovější. Pokud jste přepínali mnohokrát, obnovte stránku.

Běží vše lokálně?

Ano. Vykreslování probíhá zcela ve vašem prohlížeči a na vaší GPU přes WebGL, bez nahrávání a bez požadavků na server. Háček je, že prohlížeč bez podpory WebGL nedostane žádné záložní vykreslování.

Související nástroje
SponsorMindElixir