.shade
En .shade-fil beskriver en visuel flade, som browseren tegner med WebGL. Pages kan sætte fladen direkte ind på en side.
Eksempel: Omforms forside
Omform er et fiktivt new media-bureau. Shades Type-maske holder de levende farver inde i ordmærket. Resten af siden er hvid.
Omform - færdig side
Hele Omform-siden vises her i miniature. Åbn den i fuld størrelse for at se bevægelsen og læse indholdet.
Preview i Ele
På ordmærkets Preview er Type slået til. Her kan man redigere ord, skrifttype, størrelse, placering og bogstavafstand. Til højre ses farverne afgrænset til bogstaverne.
Edit i Ele
Edit viser den samme ordmærkefil som JSON med Type-masken, skrifttypen og shaderkoden.
Hvad er indbygget?
Shade-udvidelsen redigerer .shade-filen i Ele. Pages tegner den med WebGL og bruger Type-masken til at begrænse farverne til bogstaverne. Sidens CSS placerer ordmærket på den hvide side. Header, footer og øvrig tekst kommer fra Omforms egen Pages-model.
Tre andre retninger
Tre små live-visninger med hvert sit logo og hver sin .shade-fil. BLIKs radar er et tegn i en projektfont, så effekten løber gennem både symbolet og bogstaverne.
Shader-sprog
vec3 shade(vec2 uv) {
float t = uTime * uSpeed;
vec2 p = uv;
p.x += 0.16 * sin(p.y * 7.0 + t * 1.4);
float band = sin((p.x + p.y * 0.62) * 30.0 - t * 5.0);
float cut = step(0.34, band);
return mix(
vec3(0.17, 0.025, 0.105),
vec3(0.62, 0.075, 0.20),
cut
);
}Basically alt, hvad der kan laves i en shader, kan puttes ind og gøres til en del af hjemmesiden som element. Og den kan køre i negativ i font.