Every word of Kaury

section

a part of the page

section flavors

header

site header

header

footer

page footer

footer

nav

navigation

nav

grid

grid of columns

grid 3 columns, gap 24

column

stacks its children vertically

column gap 12

row

puts its children side by side

row gap 12

box

simple container

box padding 24

card

card (image + text)

card "Strawberry" "strawberry.png"

title

main heading

title "Hello", size 64

subtitle

secondary heading

subtitle "Our flavors"

text

paragraph

text "Welcome {name}"

image

image

image "photo.jpg", radius 16

video

video

video "film.mp4", autoplay, loop

link

link

link "Contact" "/contact"

links

menu of links

links Home, Flavors, Shop

logo

logo linking to the home page

logo "crush.svg"

button

button

button "Buy" -> cart.add can

form

form (-> action on submit)

form -> send "/api", { email }

field

input bound to a state

field email "Your email", type email

textarea

multi-line text area

textarea message "Your message"

select

dropdown list

select size "S", "M", "L"

checkbox

checkbox

checkbox agree "I agree"

list

bulleted list

list

item

list item

item "Free delivery"

icon

icon (emoji or character)

icon "★"

divider

separator line

divider

spacer

empty space

spacer 48

markdown

Markdown text rendered as rich text (titles, lists, links)

markdown post.body

details

a question or title that opens on click to show what is below

details "Is it free?"

embed

another page shown inside this one (map, video, app)

embed "https://…", "Map of the shop"

slot

inside a component: where the content given between its lines goes

slot

scene

2D or 3D immersive area

scene

object

object .glb, .gltf, .png, .svg, .json (Lottie)

object can "crush.glb"

character

animated object with named animations

character "mascot.glb"

sound

sound or music, with a mute button

sound "ambient.mp3", loop

background

background color, gradient or image

background cream

color

text color

color #333

font

typeface

font "Clash Display"

size

text size (or object size)

size 24

bold

bold text

bold

light

thin text

light

weight

font weight (100 to 900)

weight 600

italic

italic text

italic

upright

not italic (an emphasis shown by its color alone: style emphasis, then upright, color accent)

upright

underline

underlined text

underline

plain

no underline (links)

link "Docs" "/docs/", plain

uppercase

uppercase text

uppercase

line-height

line height (1.5 = one and a half)

line-height 1.6

tracking

space between letters

tracking 2

align

text alignment — left | center | right | justify

align center

center

centers the content

center

middle

sits in the middle of its row or of its grid line (a text next to a tall photo)

column middle

radius

corner radius

radius 12

round

fully round corners

round

shadow

drop shadow (hard + a color: the offset shadow of brutalist designs) — soft | medium | strong | hard | none | inner

shadow soft / shadow hard pink

glow

neon light around the element, or around the letters of a text

glow pink 30

text-glow

neon light around the letters

text-glow cyan

stroke

letters drawn as an outline only

stroke 2 black

mesh

mesh gradient: soft colored lights melting into the background

mesh pink purple orange

border

border (width, color)

border 1 gray

border-top

line above (width, color)

border-top 2 black

border-bottom

line below (width, color)

border-bottom 1 gray

pin

placed over its parent: pin bottom right, pin top 20 left 10%

pin bottom right

clip

hides what overflows

clip

no-wrap

keeps everything on one line (for a ticker)

row no-wrap

grain

paper grain texture (on the site style: the whole page)

style background cream, grain

margin

space around (1 to 4 values)

margin 24

padding

inner space (1 to 4 values)

padding 32

gap

space between children (one value, or rows then columns)

gap 24

width

width

width 320

height

height

height 400

max-width

maximum width

max-width 720

min-height

minimum height

min-height 300

fullscreen

fills the whole screen height

fullscreen

full-width

fills the whole width, no margins

full-width

zoom

shows it smaller (or bigger) with the same layout, like a thumbnail of a page: embed …, zoom 0.5

embed "/demo/", "Demo", zoom 0.5, height 1200

opacity

opacity from 0 to 1

opacity 0.8

blur

blur

blur 8

grayscale

black and white, from 0 to 1 (photos from different sources brought to one look; hover grayscale 0 gives the colors back)

image "ada.jpg", "Ada, coach", grayscale

shade

darkens the background picture so the text in front stays readable (0 to 1; with a side, only toward that side) — top | bottom | left | right

section hero, background "hall.jpg", shade 0.6 / shade 0.8 bottom

glass

frosted glass effect

glass

gradient

gradient background (2 or 3 colors, angle)

gradient pink orange

text-gradient

gradient text

text-gradient pink purple

columns

number of columns, or their widths

grid 3 columns / grid columns 2 1

direction

direction of the children — row | column

direction row

hidden

hides the element (always, or while a condition is true)

mobile hidden / hidden (tab != 1)

sticky

stays at the top while scrolling (distance from the top)

sticky 96

front

goes in front of other elements

front

cursor

cursor shape — pointer | arrow | text | none

cursor pointer

hover

style when the mouse is over it

hover lift 4

lift

moves up

hover lift 4

grow

enlarges (1.1 = +10 %)

hover grow 1.05

tilt

tilts (degrees)

tilt -3

move

moves the element (x, y), for hover and animations

move -50% 0

reveal

shows only the top part (0% to 100%), for animations

reveal 100%

animate

simple entrance — fade | lift | zoom | left | right

animate fade

class

CSS classes of your own (replaces the default look)

box class "hero"

look

a class of your own added to the default look, styled in a css block

grid 3 columns, look "pricing"

tag

exact HTML tag

box tag "figure"

attr

HTML attribute (name, value)

box attr "aria-hidden" "true"

id

id of the element (anchor)

box id "prices"

selected

selected tab or item (a style can say how it looks: selected …)

button "Code", selected (tab == 0)

current

the current page or step (current …)

link "Docs" "/docs/", current (route.path == "/docs/")

open

a details element shown open

details "Price?", open

html

content written in HTML (trusted text only)

text "Hello<br>world", html

spin

spins: spin, spin 90/s, spin on scroll, spin x

spin on scroll

float

floats gently: float, float 0.3

float

jump

jumps (once as an action, otherwise regularly)

on click -> jump

pulse

grows and shrinks rhythmically

pulse

sway

sways left and right

sway

follows mouse

reacts to the mouse: follows mouse, smooth

follows mouse, smooth

enters from

entrance: left, right, top, bottom, fade, zoom

enters from left

parallax

moves faster or slower than the scroll

parallax 0.3

says

speech bubble

says "Hi!"

play

plays a named animation

play "dance"

print

prints a value in the console

affiche, log

load

loads data (JSON or text): await load "/api/products"

charge

send

sends data: await send "/api", { email }

envoie, post

sum

sum of a list: sum cart, a -> a.price

somme

average

average of a list

moyenne, avg

min

smallest value

minimum

max

largest value

maximum

round

rounds: round 3.14159, 2

arrondi

floor

rounds down

plancher

ceil

rounds up

plafond

abs

absolute value

absolu

sqrt

square root

racine

random

random number: random 1, 6

aleatoire

pick

random item of a list

hasard

length

number of items or letters

longueur, len

now

current date and time

maintenant

to-text

converts to text

en-texte, str

to-number

converts to a number

en-nombre, num

price

formats a price: price 12.5 → "CHF 12.50"

prix, money

format-number

a number as people read it: format-number 23490 → "23,490" (in the language of the site); format-number 3.14159, 2 → "3.14"

formate-nombre

to-date

a date from a text: to-date "2027-06-12 14:00" (one date minus another: the milliseconds between them)

en-date

format-date

formats a date: format-date now()

shuffle

shuffles a list

melange

image-size

real size of an image of the site: image-size "photo.jpg" → { width, height }

taille-image

range

list of numbers: range 1, 5

intervalle

every

repeats an action: every 2s, -> count += 1

repete, repeat

later

delayed action: later 1s, -> close menu

plus-tard

persist

keeps a state in the browser: persist "cart", cart

memorise

copy

copies a text to the clipboard

copie

confetti

throws confetti on the screen

confettis

vibrate

makes the phone vibrate

vibre

scroll-to

scrolls to a section: scroll-to "flavors"

defile

share

opens the phone share sheet

partage

json-ld

structured data for Google and AIs, given to head: head json-ld { "@type": "FAQPage" }

donnees-structurees

slug

text → address-friendly form: slug "Hello world" → "hello-world"

base64

text → base64, for links that carry code or data: base64 "Hello"

encode-url

text made safe inside an address: encode-url "a b" → "a%20b"

encode-adresse

mouse

mouse position: mouse.x, mouse.y (from -1 to 1)

scroll

page scroll progress, from 0 to 1

screen

screen size: screen.width, screen.mobile

route

current page: route.path, route.params.id

objects

named 3D objects of the page