"design isn't static — it's played"
The future of the web
is being composed.
Allow sound:
"design isn't static — it's played"
Meet your instrument
tuned for motion.
The future of creation. Fluid no-code. Built to compose.
Every masterpiece
begins the same way.
With silence.
In that quiet
a question arises.
How do
we start?
We don’t start
with complexity.
We start by listening.
Fine-tune your keys.
In web composition, these are your fundamentals.
instructions
Before you start exploring, you must know how to play.
structure
Organizing pages and navigation so it feels intuitive.
motion
Bringing interfaces to life with thoughtful movement.
interaction
Experiences through clicks, taps, hovers and scrolls.
accessibility
Building digital worlds without barriers and discrimination.
performance
Delivering speed that keeps up with you and your ideas.
From silence to motion to experience.
Before AI, web was handwritten.
But AI isn’t the headliner.
You
are.
lead.
guide.
shape.
prompt.
Hello, Composer
actions: [{
id: "ta-4d53cfc1",
targets: [["wf:class", ["content_img_layout","children"]]],
timing: {
duration: .2, repeat: 1, yoyo: !0, position: 0,
stagger: {
each: .005},
ease: 16
},
tt: 0,
properties: {"wf:transform": {
scale: [null, 1.2]}
}},
actions: [{
id: "ta-8c403305",
targets: [["wf:class", ["content_img_layout","children"]]],
timing: {
duration: .2, repeat: 1, yoyo: !0, position: 0, ease: 16
},
tt: 0, properties: {
"wf:transform": {
rotation: [null, "90deg"]}
}},
targets: [["wf:class", ["content_img_layout", "children"]]],
timing: {duration: .11, position: 0, ease: 0},
tt: 2,properties: {"wf:transform": {
skewY: ["0deg", "10deg"] y: [null, "-15%"]}
}},
{id: "ta-595609af",
targets: [["wf:class", ["content_img_layout", "children"]]],
timing: {duration: .11, position: .11, ease: 0},
tt: 2,properties: {"wf:transform": {
skewY: ["10deg", "-10deg"], y: ["-15px", "-15%"]}
}},
{id: "ta-07533e5d",
targets: [["wf:class", ["content_img_layout", "children"]]],
timing: {duration: .11, position: .22, ease: 0},
tt: 2,properties: {"wf:transform": {
skewY: ["-10deg", "0deg"], y: ["-15px", "0%"]}
}},
targets: [["wf:attribute", '[data-name="gsap1"]']],
timing: {duration: .2, repeat: 1, yoyo: !0, position: 0, ease: 0},
tt: 0, properties: {"wf:transform": {x: [null, "100%"]}
}},
{id: "ta-be94bc60",targets: [["wf:attribute", '[data-name="gsap2"]']],
timing: {duration: .2, repeat: 1, yoyo: !0, position: 0, ease: 0},
tt: 0,properties: {"wf:transform": {x: [null, "50%"]}
}},
{id: "ta-899877a9",targets: [["wf:attribute", '[data-name="gsap3"]']],
timing: {duration: .11, repeat: 1, yoyo: !0, position: .09, ease: 0},
tt: 0,properties: {"wf:transform": {scaleX: [null, .8]}
}},
{id: "ta-c3411cf6",targets: [["wf:attribute", '[data-name="gsap4"]']],
timing: {duration: .2, repeat: 1, yoyo: !0, position: 0, ease: 0},
tt: 0, properties: {"wf:transform": {x: [null, "-50%"]}
}},
{id: "ta-2ef46378",targets: [["wf:attribute", '[data-name="gsap5"]']],
timing: {duration: .2, repeat: 1, yoyo: !0, position: 0, ease: 0},
tt: 0, properties: {"wf:transform": {x: [null, "-100%"]}
} },
actions: [{
id: "ta-d4fe05b9",
targets: [["wf:class", ["content_img_layout", "children"]]],
timing: {
duration: .2, repeat: 1, yoyo: !0, position: 0,
stagger: {
amount: .1, from: "center"},
ease: 20
},
tt: 0,
properties: {
"wf:transform": {
y: [null, "-100%"]}
}},
We’ll stop thinking in rules and start
creating in flow. A beat doesn’t wait for
permission. Neither should our creativity.
What’s next won’t come just from code.
It’ll come from moments of play.
We’ll stop thinking in rules and
start creating in flow. What’s
next won’t come just from code.
It’ll come from moments of play.
What will the future of the web look like? No one knows, but we decide.