designlang 12.16.0 → 12.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/CODE_OF_CONDUCT.md +132 -0
- package/README.md +26 -6
- package/assets/atlas-cloud-logo.svg +55 -0
- package/bin/design-extract.js +5 -1
- package/commands/extract.md +9 -1
- package/docs/INTERVIEW_PREP.md +98 -0
- package/package.json +4 -4
- package/src/classifiers/smart.js +54 -22
- package/src/formatters/motion-gsap.js +131 -0
- package/src/formatters/motion-waapi.js +140 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [12.17.0] — 2026-06-12
|
|
4
|
+
|
|
5
|
+
**motionlang adds two more emitters — GSAP and the framework-free Web Animations API.**
|
|
6
|
+
|
|
7
|
+
The motion language already shipped to Framer Motion, Motion One, plain CSS
|
|
8
|
+
and Tailwind. This release covers the two most-requested remaining targets:
|
|
9
|
+
GreenSock and the browser-native Web Animations API.
|
|
10
|
+
|
|
11
|
+
- **GSAP preset (`<host>-motion.gsap.js`)** — registers the page's extracted
|
|
12
|
+
cubic-bezier curves as named `CustomEase`s (so the site's exact feel is
|
|
13
|
+
reproducible), exposes duration presets in seconds, and ships `gsap.from()`
|
|
14
|
+
reveal helpers (`fadeIn` / `slideUp` / `scaleIn` / `pop`). When the page
|
|
15
|
+
uses scroll-/view-timeline, a `revealOnScroll()` ScrollTrigger batch helper
|
|
16
|
+
is emitted too. `registerEases(gsap)` wires the CustomEases in one call.
|
|
17
|
+
|
|
18
|
+
- **Web Animations API preset (`<host>-motion.waapi.js`)** — zero dependency,
|
|
19
|
+
runs on the browser-native `Element.animate()`. WAAPI accepts cubic-bezier
|
|
20
|
+
easing strings verbatim, so the extracted curves are reproduced *exactly*
|
|
21
|
+
(no spring approximation). Emits `easings`, `durations`, keyframe arrays
|
|
22
|
+
reconstructed from on-page `@keyframes`, and `fadeIn` / `slideUp` / `scaleIn`
|
|
23
|
+
helpers that return the live `Animation` and honour `prefers-reduced-motion`
|
|
24
|
+
automatically.
|
|
25
|
+
|
|
26
|
+
Both surface as live copy/download cards on the motionlang analyzer at
|
|
27
|
+
designlang.app/motion.
|
|
28
|
+
|
|
3
29
|
## [12.16.0] — 2026-06-06
|
|
4
30
|
|
|
5
31
|
**motionlang grows two framework-agnostic emitters + the website PDF download is fixed.**
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Contributor Covenant Code of Conduct
|
|
2
|
+
|
|
3
|
+
## Our Pledge
|
|
4
|
+
|
|
5
|
+
We as members, contributors, and leaders pledge to make participation in our
|
|
6
|
+
community a harassment-free experience for everyone, regardless of age, body
|
|
7
|
+
size, visible or invisible disability, ethnicity, sex characteristics, gender
|
|
8
|
+
identity and expression, level of experience, education, socio-economic status,
|
|
9
|
+
nationality, personal appearance, race, caste, color, religion, or sexual
|
|
10
|
+
identity and orientation.
|
|
11
|
+
|
|
12
|
+
We pledge to act and interact in ways that contribute to an open, welcoming,
|
|
13
|
+
diverse, inclusive, and healthy community.
|
|
14
|
+
|
|
15
|
+
## Our Standards
|
|
16
|
+
|
|
17
|
+
Examples of behavior that contributes to a positive environment for our
|
|
18
|
+
community include:
|
|
19
|
+
|
|
20
|
+
* Demonstrating empathy and kindness toward other people
|
|
21
|
+
* Being respectful of differing opinions, viewpoints, and experiences
|
|
22
|
+
* Giving and gracefully accepting constructive feedback
|
|
23
|
+
* Accepting responsibility and apologizing to those affected by our mistakes,
|
|
24
|
+
and learning from the experience
|
|
25
|
+
* Focusing on what is best not just for us as individuals, but for the overall
|
|
26
|
+
community
|
|
27
|
+
|
|
28
|
+
Examples of unacceptable behavior include:
|
|
29
|
+
|
|
30
|
+
* The use of sexualized language or imagery, and sexual attention or advances of
|
|
31
|
+
any kind
|
|
32
|
+
* Trolling, insulting or derogatory comments, and personal or political attacks
|
|
33
|
+
* Public or private harassment
|
|
34
|
+
* Publishing others' private information, such as a physical or email address,
|
|
35
|
+
without their explicit permission
|
|
36
|
+
* Other conduct which could reasonably be considered inappropriate in a
|
|
37
|
+
professional setting
|
|
38
|
+
|
|
39
|
+
## Enforcement Responsibilities
|
|
40
|
+
|
|
41
|
+
Community leaders are responsible for clarifying and enforcing our standards of
|
|
42
|
+
acceptable behavior and will take appropriate and fair corrective action in
|
|
43
|
+
response to any behavior that they deem inappropriate, threatening, offensive,
|
|
44
|
+
or harmful.
|
|
45
|
+
|
|
46
|
+
Community leaders have the right and responsibility to remove, edit, or reject
|
|
47
|
+
comments, commits, code, wiki edits, issues, and other contributions that are
|
|
48
|
+
not aligned to this Code of Conduct, and will communicate reasons for moderation
|
|
49
|
+
decisions when appropriate.
|
|
50
|
+
|
|
51
|
+
## Scope
|
|
52
|
+
|
|
53
|
+
This Code of Conduct applies within all community spaces, and also applies when
|
|
54
|
+
an individual is officially representing the community in public spaces.
|
|
55
|
+
Examples of representing our community include using an official email address,
|
|
56
|
+
posting via an official social media account, or acting as an appointed
|
|
57
|
+
representative at an online or offline event.
|
|
58
|
+
|
|
59
|
+
## Enforcement
|
|
60
|
+
|
|
61
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
62
|
+
reported to the community leaders responsible for enforcement at
|
|
63
|
+
smanavarya@gmail.com.
|
|
64
|
+
All complaints will be reviewed and investigated promptly and fairly.
|
|
65
|
+
|
|
66
|
+
All community leaders are obligated to respect the privacy and security of the
|
|
67
|
+
reporter of any incident.
|
|
68
|
+
|
|
69
|
+
## Enforcement Guidelines
|
|
70
|
+
|
|
71
|
+
Community leaders will follow these Community Impact Guidelines in determining
|
|
72
|
+
the consequences for any action they deem in violation of this Code of Conduct:
|
|
73
|
+
|
|
74
|
+
### 1. Correction
|
|
75
|
+
|
|
76
|
+
**Community Impact**: Use of inappropriate language or other behavior deemed
|
|
77
|
+
unprofessional or unwelcome in the community.
|
|
78
|
+
|
|
79
|
+
**Consequence**: A private, written warning from community leaders, providing
|
|
80
|
+
clarity around the nature of the violation and an explanation of why the
|
|
81
|
+
behavior was inappropriate. A public apology may be requested.
|
|
82
|
+
|
|
83
|
+
### 2. Warning
|
|
84
|
+
|
|
85
|
+
**Community Impact**: A violation through a single incident or series of
|
|
86
|
+
actions.
|
|
87
|
+
|
|
88
|
+
**Consequence**: A warning with consequences for continued behavior. No
|
|
89
|
+
interaction with the people involved, including unsolicited interaction with
|
|
90
|
+
those enforcing the Code of Conduct, for a specified period of time. This
|
|
91
|
+
includes avoiding interactions in community spaces as well as external channels
|
|
92
|
+
like social media. Violating these terms may lead to a temporary or permanent
|
|
93
|
+
ban.
|
|
94
|
+
|
|
95
|
+
### 3. Temporary Ban
|
|
96
|
+
|
|
97
|
+
**Community Impact**: A serious violation of community standards, including
|
|
98
|
+
sustained inappropriate behavior.
|
|
99
|
+
|
|
100
|
+
**Consequence**: A temporary ban from any sort of interaction or public
|
|
101
|
+
communication with the community for a specified period of time. No public or
|
|
102
|
+
private interaction with the people involved, including unsolicited interaction
|
|
103
|
+
with those enforcing the Code of Conduct, is allowed during this period.
|
|
104
|
+
Violating these terms may lead to a permanent ban.
|
|
105
|
+
|
|
106
|
+
### 4. Permanent Ban
|
|
107
|
+
|
|
108
|
+
**Community Impact**: Demonstrating a pattern of violation of community
|
|
109
|
+
standards, including sustained inappropriate behavior, harassment of an
|
|
110
|
+
individual, or aggression toward or disparagement of classes of individuals.
|
|
111
|
+
|
|
112
|
+
**Consequence**: A permanent ban from any sort of public interaction within the
|
|
113
|
+
community.
|
|
114
|
+
|
|
115
|
+
## Attribution
|
|
116
|
+
|
|
117
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
|
118
|
+
version 2.1, available at
|
|
119
|
+
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
|
|
120
|
+
|
|
121
|
+
Community Impact Guidelines were inspired by
|
|
122
|
+
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
|
|
123
|
+
|
|
124
|
+
For answers to common questions about this code of conduct, see the FAQ at
|
|
125
|
+
[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
|
|
126
|
+
[https://www.contributor-covenant.org/translations][translations].
|
|
127
|
+
|
|
128
|
+
[homepage]: https://www.contributor-covenant.org
|
|
129
|
+
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
|
|
130
|
+
[Mozilla CoC]: https://github.com/mozilla/diversity
|
|
131
|
+
[FAQ]: https://www.contributor-covenant.org/faq
|
|
132
|
+
[translations]: https://www.contributor-covenant.org/translations
|
package/README.md
CHANGED
|
@@ -10,14 +10,23 @@
|
|
|
10
10
|
|
|
11
11
|
</p>
|
|
12
12
|
|
|
13
|
-
---
|
|
14
|
-
|
|
15
13
|
<p align="center">
|
|
16
14
|
<img src="https://raw.githubusercontent.com/Manavarya09/design-extract/main/designlang.png" alt="designlang in action — extracts DTCG tokens, Tailwind config, Figma variables, brand book PDF" width="100%">
|
|
17
15
|
</p>
|
|
18
16
|
|
|
19
17
|
[](https://www.npmjs.com/package/designlang)
|
|
20
18
|
|
|
19
|
+
<p align="center">
|
|
20
|
+
<a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=referral&utm_campaign=design-extract">
|
|
21
|
+
<img src="./assets/atlas-cloud-logo.svg" alt="Atlas Cloud" width="220">
|
|
22
|
+
</a>
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
<p align="center">
|
|
26
|
+
Powered by <a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=referral&utm_campaign=design-extract">Atlas Cloud</a> for OpenAI-compatible <code>--smart</code> classification.
|
|
27
|
+
For AI coding workflows, try the <a href="https://www.atlascloud.ai/console/coding-plan?utm_source=github&utm_medium=referral&utm_campaign=design-extract">Atlas Cloud coding plan</a>.
|
|
28
|
+
</p>
|
|
29
|
+
|
|
21
30
|
**designlang** points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0 / Lovable / Cursor / Claude Artifacts.
|
|
22
31
|
|
|
23
32
|
It also goes where extractors don't: **layout patterns**, **responsive behavior across 4 breakpoints**, **hover / focus / active states**, **WCAG contrast scoring**, **multi-page consistency**, **drift checks against a live source-of-truth**, **visual-diffs**, and a **shareable graded report card**.
|
|
@@ -51,6 +60,21 @@ npm i -g designlang # global
|
|
|
51
60
|
npx skills add Manavarya09/design-extract # as an agent skill (40+ agents)
|
|
52
61
|
```
|
|
53
62
|
|
|
63
|
+
## Atlas Cloud for `--smart`
|
|
64
|
+
|
|
65
|
+
`designlang --smart` can now use Atlas Cloud through its OpenAI-compatible chat API, so low-confidence classifiers can stay zero-dependency while routing to Atlas-hosted models.
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
|
|
69
|
+
export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
|
|
70
|
+
|
|
71
|
+
npx designlang https://stripe.com --smart
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
- Atlas Cloud envs: `ATLASCLOUD_API_KEY`, `ATLASCLOUD_MODEL`, optional `ATLASCLOUD_API_BASE`
|
|
75
|
+
- Alias envs also work: `ATLAS_CLOUD_API_KEY`, `ATLAS_CLOUD_MODEL`, `ATLAS_CLOUD_API_BASE`
|
|
76
|
+
- Existing `OPENAI_API_KEY` and `ANTHROPIC_API_KEY` flows keep working unchanged
|
|
77
|
+
|
|
54
78
|
## What you get
|
|
55
79
|
|
|
56
80
|
Each run writes 17+ files to `./design-extract-output/`. The headline outputs:
|
|
@@ -276,9 +300,6 @@ npx skills add Manavarya09/design-extract
|
|
|
276
300
|
|
|
277
301
|
In Cursor / Codex / etc., use `/extract-design <url>`.
|
|
278
302
|
|
|
279
|
-
## Website
|
|
280
|
-
|
|
281
|
-
**[https://designlang.manavaryasingh.com](https://designlang.manavaryasingh.com/)** — the brutalist product page.
|
|
282
303
|
|
|
283
304
|
## Contributing
|
|
284
305
|
|
|
@@ -288,4 +309,3 @@ See [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!
|
|
|
288
309
|
|
|
289
310
|
[MIT](LICENSE) - Manav Arya Singh
|
|
290
311
|
|
|
291
|
-
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1224 792">
|
|
3
|
+
<defs>
|
|
4
|
+
<style>
|
|
5
|
+
.cls-1 {
|
|
6
|
+
clip-path: url(#clippath);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-2 {
|
|
10
|
+
fill: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cls-2, .cls-3 {
|
|
14
|
+
stroke-width: 0px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cls-4 {
|
|
18
|
+
clip-path: url(#clippath-1);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cls-5 {
|
|
22
|
+
clip-path: url(#clippath-2);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.cls-3 {
|
|
26
|
+
fill: #000;
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
<clipPath id="clippath">
|
|
30
|
+
<rect class="cls-2" x="20.73" y="315.14" width="1182.55" height="161.72"/>
|
|
31
|
+
</clipPath>
|
|
32
|
+
<clipPath id="clippath-1">
|
|
33
|
+
<rect class="cls-2" x="20.73" y="315.14" width="1182.55" height="161.72"/>
|
|
34
|
+
</clipPath>
|
|
35
|
+
<clipPath id="clippath-2">
|
|
36
|
+
<rect class="cls-2" x="20.73" y="315.14" width="1182.55" height="161.72"/>
|
|
37
|
+
</clipPath>
|
|
38
|
+
</defs>
|
|
39
|
+
<g class="cls-1">
|
|
40
|
+
<path class="cls-3" d="M104.38,315.14L20.73,476.86c38.73-15.32,70.03-17.6,98.12-16.26l-12.85-28.4c-5.63-.57-21.86-.57-29.57,1.45l27.95-62.14s42.06,91.31,42.13,91.32c8.09,1.27,29.8,8.55,41.52,14.03l-83.66-161.72Z"/>
|
|
41
|
+
</g>
|
|
42
|
+
<polygon class="cls-3" points="207.87 323.37 207.87 361.57 189.68 361.57 189.68 381.76 207.87 381.76 207.87 471.35 234.07 471.35 234.07 381.76 252.87 381.76 252.87 361.57 234.07 361.57 234.07 323.37 207.87 323.37"/>
|
|
43
|
+
<rect class="cls-3" x="268.07" y="323.37" width="26.19" height="147.98"/>
|
|
44
|
+
<g class="cls-4">
|
|
45
|
+
<path class="cls-3" d="M340.48,416.95c0,13.6,9.79,33.39,33.39,33.39,14.6,0,24.2-7.6,29.2-17.59,2.6-4.8,3.8-10,4.2-15.4.2-5.2-.8-10.6-3-15.4-4.6-10.4-14.8-19.4-30.6-19.4-21.2,0-33.19,17.2-33.19,34.19v.2ZM433.26,471.35h-26.19v-15.8c-7,12.8-21.6,19.2-36.99,19.2-35.2,0-55.8-27.4-55.8-58.4,0-34.6,25-58.19,55.8-58.19,20,0,32.19,10.6,36.99,19.4v-16h26.19v109.78Z"/>
|
|
46
|
+
<path class="cls-3" d="M506.87,391.16c-.2-5.8-3.2-11.8-13.4-11.8-8.8,0-12.99,5.6-12.99,11,.2,7,8.2,10.79,18.6,13.8,17.6,4.8,36.6,10,36.8,33.59.4,22.6-18.6,36.99-41.59,36.99-17,0-40-8.8-41.99-35.39h26.19c1,11.8,11.2,14.2,16.2,14.2,8.2,0,15.2-5.4,15-12.8,0-9.4-8.2-12-28.4-18.99-14.8-4.6-26.79-12.8-26.99-28.6,0-21.6,18.19-35,39.39-35,14.8,0,36.8,6.6,39,33h-25.8Z"/>
|
|
47
|
+
<path class="cls-3" d="M760.26,421.76c-9,30.59-37.8,52.39-72.39,52.39-45.19,0-77.59-35.8-77.59-76.99s30.59-76.58,77.39-76.58c42.59.2,66.79,31.59,72.59,53.19h-31.4c-4.6-10.19-17.8-26.79-41.39-26.99-28.8,0-47.39,24.2-47.39,50.39s19.4,50.79,47.6,50.79c26.39,0,38.39-20.8,41.19-26.19h31.4Z"/>
|
|
48
|
+
</g>
|
|
49
|
+
<rect class="cls-3" x="779.68" y="323.37" width="26.19" height="147.98"/>
|
|
50
|
+
<g class="cls-5">
|
|
51
|
+
<path class="cls-3" d="M852.09,416.56c0,19.2,14.59,33.39,32.59,33.39s32.4-14.2,32.4-33.6-14.4-33.59-32.4-33.59-32.59,14.2-32.59,33.59v.2ZM825.89,416.15c0-28,20.6-57.79,58.79-57.79s58.79,29.79,58.79,57.99-20.59,58.19-58.79,58.19-58.79-29.79-58.79-58.19v-.2Z"/>
|
|
52
|
+
<path class="cls-3" d="M1064.87,471.35h-24.6v-14.6c-4.6,8.6-14.4,18.2-34.19,18-36-.2-42.79-27.6-42.79-46.8v-66.39h26.19v59.79c0,16.2,5.4,28.99,23.99,28.8,18.8,0,25.2-12.4,25.2-28v-60.59h26.2v109.78Z"/>
|
|
53
|
+
<path class="cls-3" d="M1111.28,416.35c0,18.6,13.4,33.8,33.59,33.8,9.6,0,18.2-3.8,24.4-10,6.2-6.2,9.8-14.8,9.39-24.4,0-9.6-3.8-17.8-9.8-23.6-6-6-14.39-9.6-23.79-9.6-21.4,0-33.8,16.4-33.8,33.59v.2ZM1203.27,471.35h-25v-15.8c-4.8,8.2-15.2,19.2-37.6,19.2-33.79,0-55.59-26.4-55.59-58.4,0-35.59,25.4-58.19,55.19-58.19,21,0,32.8,11.19,36.8,17.59v-52.39h26.2v147.98Z"/>
|
|
54
|
+
</g>
|
|
55
|
+
</svg>
|
package/bin/design-extract.js
CHANGED
|
@@ -32,6 +32,8 @@ import { formatFramerMotion } from '../src/formatters/framer-motion.js';
|
|
|
32
32
|
import { formatMotionOne } from '../src/formatters/motion-one.js';
|
|
33
33
|
import { formatMotionCss } from '../src/formatters/motion-css.js';
|
|
34
34
|
import { formatMotionTailwind } from '../src/formatters/motion-tailwind.js';
|
|
35
|
+
import { formatMotionGsap } from '../src/formatters/motion-gsap.js';
|
|
36
|
+
import { formatMotionWaapi } from '../src/formatters/motion-waapi.js';
|
|
35
37
|
import { formatCssVars } from '../src/formatters/css-vars.js';
|
|
36
38
|
import { formatPreview } from '../src/formatters/preview.js';
|
|
37
39
|
import { formatFigma } from '../src/formatters/figma.js';
|
|
@@ -112,7 +114,7 @@ program
|
|
|
112
114
|
.option('--tokens-legacy', 'Emit pre-v7 flat token JSON (backward compat)')
|
|
113
115
|
.option('--platforms <csv>', 'Additional platforms: web,ios,android,flutter,wordpress,all (web is always emitted)', 'web')
|
|
114
116
|
.option('--emit-agent-rules', 'Emit Cursor/Claude Code/generic agent rules')
|
|
115
|
-
.option('--smart', 'use optional LLM fallback when heuristic classifiers have low confidence (
|
|
117
|
+
.option('--smart', 'use optional LLM fallback when heuristic classifiers have low confidence (supports ATLASCLOUD_API_KEY, OPENAI_API_KEY, or ANTHROPIC_API_KEY)')
|
|
116
118
|
.option('--pages <n>', 'crawl N canonical pages (pricing/docs/blog/about/product) in addition to the homepage', parseInt)
|
|
117
119
|
.option('--no-prompts', 'skip writing the prompt-pack directory')
|
|
118
120
|
.option('--no-design-md', 'skip writing the agent-native DESIGN.md (single-file, 8-section, YAML front matter)')
|
|
@@ -361,6 +363,8 @@ program
|
|
|
361
363
|
{ name: `${prefix}-motion.one.js`, content: formatMotionOne(design), label: 'Motion One presets (animate() + springs + scroll)' },
|
|
362
364
|
{ name: `${prefix}-motion.css`, content: formatMotionCss(design), label: 'Motion CSS (vars + keyframes + utilities + reduced-motion)' },
|
|
363
365
|
{ name: `${prefix}-motion.tailwind.js`, content: formatMotionTailwind(design), label: 'Tailwind motion preset (duration/easing/keyframes/animation)' },
|
|
366
|
+
{ name: `${prefix}-motion.gsap.js`, content: formatMotionGsap(design), label: 'GSAP presets (CustomEase + reveals + ScrollTrigger)' },
|
|
367
|
+
{ name: `${prefix}-motion.waapi.js`, content: formatMotionWaapi(design), label: 'Web Animations API presets (zero-dependency, exact curves)' },
|
|
364
368
|
{ name: `${prefix}-variables.css`, content: formatCssVars(design), label: 'CSS Variables' },
|
|
365
369
|
{ name: `${prefix}-preview.html`, content: formatPreview(design), label: 'Visual Preview' },
|
|
366
370
|
{ name: `${prefix}-figma-variables.json`, content: formatFigma(design), label: 'Figma Variables' },
|
package/commands/extract.md
CHANGED
|
@@ -35,7 +35,15 @@ Useful flags the user may pass via `$ARGUMENTS`:
|
|
|
35
35
|
| `--depth <n>` | crawl N additional canonical pages |
|
|
36
36
|
| `--dark` | also extract dark mode |
|
|
37
37
|
| `--platforms ios,android,flutter,wordpress` | multi-platform emitters |
|
|
38
|
-
| `--smart` | LLM fallback for low-confidence classifiers (
|
|
38
|
+
| `--smart` | LLM fallback for low-confidence classifiers (supports `ATLASCLOUD_API_KEY`, `OPENAI_API_KEY`, or `ANTHROPIC_API_KEY`) |
|
|
39
39
|
| `--cookie-file ./session.json` | authenticated extraction |
|
|
40
40
|
|
|
41
41
|
Full reference: https://github.com/Manavarya09/design-extract#full-cli-reference
|
|
42
|
+
|
|
43
|
+
Atlas Cloud quick setup for `--smart`:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
|
|
47
|
+
export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
|
|
48
|
+
npx designlang https://stripe.com --smart
|
|
49
|
+
```
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# designlang — Interview Prep (Plain English)
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## What is it, in one sentence
|
|
6
|
+
|
|
7
|
+
You give it any website URL. It opens a real browser, reads every style off the page, and spits out 17+ files — design tokens, Tailwind config, Figma variables, a full brand book — everything you'd need to recreate or match that design.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## How it actually works — step by step
|
|
12
|
+
|
|
13
|
+
### 1. Opens a real browser
|
|
14
|
+
|
|
15
|
+
It uses Playwright (basically headless Chrome) and loads the actual live website — not the source code, not a screenshot. The real thing, fully rendered, fonts loaded, dark mode checked, hover states triggered.
|
|
16
|
+
|
|
17
|
+
> **Say this:** *"We're reading the computed styles off the live DOM — what the browser actually rendered, not what someone wrote in a CSS file. That means it catches inline styles, CSS variables, third-party component libraries, everything."*
|
|
18
|
+
|
|
19
|
+
### 2. Pulls every style off the page
|
|
20
|
+
|
|
21
|
+
Once the page is loaded, it walks up to 5,000 elements and reads their computed styles — colors, fonts, spacing, shadows, borders, z-index, animations. It also grabs CSS variables, media queries, and keyframe animations separately.
|
|
22
|
+
|
|
23
|
+
### 3. Runs 30+ extractors in parallel
|
|
24
|
+
|
|
25
|
+
Each piece gets its own focused extractor — one for colors, one for typography, one for spacing, one for motion, one for accessibility contrast, and so on. They all run on the same raw data. If one crashes, the others keep going (`safeExtract` wraps each one, so a broken extractor returns `null` instead of killing the whole run).
|
|
26
|
+
|
|
27
|
+
> **Say this:** *"Each extractor is isolated. The whole thing can't blow up because one extractor failed on a weird site."*
|
|
28
|
+
|
|
29
|
+
### 4. Does the smart stuff
|
|
30
|
+
|
|
31
|
+
A few things are more interesting than just reading values:
|
|
32
|
+
|
|
33
|
+
- **Colors** — clusters similar colors together (so 40 near-identical blues become "primary blue") and figures out which one is the brand color based on how often it shows up on buttons and CTAs
|
|
34
|
+
- **Interactions** — actually hovers over elements, opens menus, triggers modals, and diffs the styles before and after to capture hover states and transitions
|
|
35
|
+
- **Scoring** — grades the design system (color discipline, typography consistency, spacing system) against real production benchmarks like Stripe and Linear
|
|
36
|
+
- **Accessibility** — checks every foreground/background color pair against WCAG, and suggests the nearest passing color as a fix
|
|
37
|
+
|
|
38
|
+
### 5. Writes 17+ output files
|
|
39
|
+
|
|
40
|
+
Each formatter takes the extracted data and writes a specific file. Tailwind config, Figma variables JSON, DTCG tokens, a big markdown doc for feeding into AI tools, CSS variables, typed React component stubs, a graded report card HTML, and more.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## The interesting features to talk about
|
|
45
|
+
|
|
46
|
+
**Interaction states** — most extractors just read static CSS. designlang actually *does things* to the page: scrolls, hovers buttons, opens dropdowns, clicks modals. Then it captures what changed. That's how you get real hover colors and transition details, not just the default state.
|
|
47
|
+
|
|
48
|
+
**The grading system** — it scores the design on things like "how many unique colors does this site use?" (≤12 gets 100, >100 gets 35 with a warning). It has real calibration data from sites like Stripe, Vercel, GitHub. So when it says a site scores 80/100 for typography consistency, that's against a real benchmark, not made up.
|
|
49
|
+
|
|
50
|
+
**Remix / vocabulary** — you can say "restyle this site as brutalist" or "cyberpunk" and it rewrites the tokens into that vocabulary. There are 6 vocabulary modules (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), each with its own rules for color, type, spacing.
|
|
51
|
+
|
|
52
|
+
**Pair** — point it at two sites (e.g. `designlang pair stripe.com linear.app`) and it fuses them: takes the visual identity of one and the brand voice/tone of the other.
|
|
53
|
+
|
|
54
|
+
**MCP server** — the extracted data can be served over MCP so any AI tool that speaks MCP can query the design tokens directly, without re-crawling.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## How it handles dark mode
|
|
59
|
+
|
|
60
|
+
It loads the page twice — once with `colorScheme: light`, once with `colorScheme: dark`. Both passes run the color and variable extractors. The output has a `darkMode` section with its own palette and CSS variable overrides.
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## What makes it different from other design extraction tools
|
|
65
|
+
|
|
66
|
+
> **Say this:** *"Most tools give you the colors and fonts. designlang reads the architecture — the layout system, the responsive behavior across 4 breakpoints, what changes on hover, how the motion feels. The diff between a color picker and a design system reverse-engineer."*
|
|
67
|
+
|
|
68
|
+
The things no one else does:
|
|
69
|
+
- Hover/focus/active state capture (actually simulates interaction)
|
|
70
|
+
- Motion fingerprint — figures out if the site feels "springy", "smooth", "mechanical" based on the easing curves
|
|
71
|
+
- Multi-page consistency — crawls internal links and reconciles which tokens are shared vs per-route
|
|
72
|
+
- Accessibility remediation — not just "this fails WCAG" but "here's the nearest color that would pass"
|
|
73
|
+
- Brand voice — reads button labels and headings to figure out tone, pronoun posture, CTA verb patterns
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## The whole thing in one breath
|
|
78
|
+
|
|
79
|
+
> "It opens a real browser, renders the site, walks every element, and runs 30+ extractors on the computed styles. Colors get clustered into a palette, interactions get simulated to capture hover states, the design gets graded against real benchmarks, and everything formats out into whatever you need — Tailwind config, Figma variables, DTCG tokens, an AI prompt pack."
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Quick answers for common questions
|
|
84
|
+
|
|
85
|
+
**Why use a headless browser instead of fetching the CSS?**
|
|
86
|
+
CSS files only tell you what was written. The browser tells you what was actually applied — after cascade, after JS, after third-party components inject their own styles. The computed styles are the ground truth.
|
|
87
|
+
|
|
88
|
+
**What if the site uses React or loads content lazily?**
|
|
89
|
+
The crawler waits for `networkidle` and `fonts.ready` before extracting. For interaction states, it also scrolls and clicks to trigger lazy-loaded content.
|
|
90
|
+
|
|
91
|
+
**How does it know which color is the "primary" brand color?**
|
|
92
|
+
It clusters all colors by visual similarity, then looks at which cluster appears most on interactive elements — buttons, links, CTAs. The one with the highest interactive-background score wins.
|
|
93
|
+
|
|
94
|
+
**How accurate is the grade?**
|
|
95
|
+
It's calibrated against real production design systems (Stripe, Linear, Vercel, GitHub, Apple). Not perfect, but it's a relative signal — a 90 means "this is as tight as Stripe," not "this passed a spec."
|
|
96
|
+
|
|
97
|
+
**What's the hardest part technically?**
|
|
98
|
+
Color clustering. You can't just bucket by hex — hover states and opacity variants create hundreds of near-identical colors. The clustering groups them by perceptual distance so the output is readable instead of noise.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "designlang",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.17.0",
|
|
4
4
|
"description": "Extract the complete design language from any website and ship it — clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
},
|
|
9
9
|
"main": "src/index.js",
|
|
10
10
|
"exports": {
|
|
11
|
-
".":
|
|
12
|
-
"./api":
|
|
13
|
-
"./mcp":
|
|
11
|
+
".": "./src/index.js",
|
|
12
|
+
"./api": "./src/api.js",
|
|
13
|
+
"./mcp": "./src/mcp/index.js",
|
|
14
14
|
"./package.json": "./package.json"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
package/src/classifiers/smart.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// Optional LLM fallback for low-confidence classifications. No SDK deps — we
|
|
2
|
-
// hit the
|
|
3
|
-
// when the user passes --smart AND an API key is
|
|
4
|
-
// no-ops otherwise so the core extractor stays
|
|
2
|
+
// hit the Anthropic REST API or an OpenAI-compatible chat endpoint directly via
|
|
3
|
+
// global fetch. Runs only when the user passes --smart AND an API key is
|
|
4
|
+
// available in env. Silently no-ops otherwise so the core extractor stays
|
|
5
|
+
// zero-config.
|
|
5
6
|
//
|
|
6
7
|
// Consumers call `refineWithSmart({ pageIntent, sectionRoles, materialLanguage,
|
|
7
8
|
// componentLibrary }, digest)` — we only hit the network for fields where
|
|
@@ -19,9 +20,38 @@ const TASKS = {
|
|
|
19
20
|
},
|
|
20
21
|
};
|
|
21
22
|
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
function trimTrailingSlash(url) {
|
|
24
|
+
return url ? url.replace(/\/+$/, '') : url;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export function resolveSmartProviderConfig(env = process.env) {
|
|
28
|
+
if (env.ANTHROPIC_API_KEY) {
|
|
29
|
+
return {
|
|
30
|
+
provider: 'anthropic',
|
|
31
|
+
apiKey: env.ANTHROPIC_API_KEY,
|
|
32
|
+
model: env.DESIGNLANG_MODEL || 'claude-haiku-4-5-20251001',
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const atlasApiKey = env.ATLASCLOUD_API_KEY || env.ATLAS_CLOUD_API_KEY;
|
|
37
|
+
if (atlasApiKey) {
|
|
38
|
+
return {
|
|
39
|
+
provider: 'atlascloud',
|
|
40
|
+
apiKey: atlasApiKey,
|
|
41
|
+
baseUrl: trimTrailingSlash(env.ATLASCLOUD_API_BASE || env.ATLAS_CLOUD_API_BASE || 'https://api.atlascloud.ai/v1'),
|
|
42
|
+
model: env.DESIGNLANG_MODEL || env.ATLASCLOUD_MODEL || env.ATLAS_CLOUD_MODEL || 'deepseek-ai/deepseek-v4-pro',
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
if (env.OPENAI_API_KEY) {
|
|
47
|
+
return {
|
|
48
|
+
provider: 'openai',
|
|
49
|
+
apiKey: env.OPENAI_API_KEY,
|
|
50
|
+
baseUrl: trimTrailingSlash(env.OPENAI_API_BASE || env.OPENAI_BASE_URL || 'https://api.openai.com/v1'),
|
|
51
|
+
model: env.DESIGNLANG_MODEL || 'gpt-4o-mini',
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
|
|
25
55
|
return null;
|
|
26
56
|
}
|
|
27
57
|
|
|
@@ -44,16 +74,16 @@ function buildDigest({ rawData, design, pageIntent }) {
|
|
|
44
74
|
].join('\n\n');
|
|
45
75
|
}
|
|
46
76
|
|
|
47
|
-
async function callAnthropic(system, user) {
|
|
77
|
+
async function callAnthropic(config, system, user) {
|
|
48
78
|
const res = await fetch('https://api.anthropic.com/v1/messages', {
|
|
49
79
|
method: 'POST',
|
|
50
80
|
headers: {
|
|
51
|
-
'x-api-key':
|
|
81
|
+
'x-api-key': config.apiKey,
|
|
52
82
|
'anthropic-version': '2023-06-01',
|
|
53
83
|
'content-type': 'application/json',
|
|
54
84
|
},
|
|
55
85
|
body: JSON.stringify({
|
|
56
|
-
model:
|
|
86
|
+
model: config.model,
|
|
57
87
|
max_tokens: 200,
|
|
58
88
|
system,
|
|
59
89
|
messages: [{ role: 'user', content: user }],
|
|
@@ -65,15 +95,15 @@ async function callAnthropic(system, user) {
|
|
|
65
95
|
return text;
|
|
66
96
|
}
|
|
67
97
|
|
|
68
|
-
async function
|
|
69
|
-
const res = await fetch(
|
|
98
|
+
async function callOpenAICompatible(config, system, user) {
|
|
99
|
+
const res = await fetch(`${config.baseUrl}/chat/completions`, {
|
|
70
100
|
method: 'POST',
|
|
71
101
|
headers: {
|
|
72
|
-
'authorization': `Bearer ${
|
|
102
|
+
'authorization': `Bearer ${config.apiKey}`,
|
|
73
103
|
'content-type': 'application/json',
|
|
74
104
|
},
|
|
75
105
|
body: JSON.stringify({
|
|
76
|
-
model:
|
|
106
|
+
model: config.model,
|
|
77
107
|
messages: [
|
|
78
108
|
{ role: 'system', content: system },
|
|
79
109
|
{ role: 'user', content: user },
|
|
@@ -82,14 +112,14 @@ async function callOpenAI(system, user) {
|
|
|
82
112
|
response_format: { type: 'json_object' },
|
|
83
113
|
}),
|
|
84
114
|
});
|
|
85
|
-
if (!res.ok) throw new Error(
|
|
115
|
+
if (!res.ok) throw new Error(`${config.provider} ${res.status}`);
|
|
86
116
|
const json = await res.json();
|
|
87
117
|
return json.choices?.[0]?.message?.content || '';
|
|
88
118
|
}
|
|
89
119
|
|
|
90
|
-
async function callLLM(
|
|
91
|
-
if (provider === 'anthropic') return callAnthropic(system, user);
|
|
92
|
-
return
|
|
120
|
+
async function callLLM(config, system, user) {
|
|
121
|
+
if (config.provider === 'anthropic') return callAnthropic(config, system, user);
|
|
122
|
+
return callOpenAICompatible(config, system, user);
|
|
93
123
|
}
|
|
94
124
|
|
|
95
125
|
function parseJsonLoose(text) {
|
|
@@ -101,8 +131,10 @@ function parseJsonLoose(text) {
|
|
|
101
131
|
|
|
102
132
|
export async function refineWithSmart({ enabled, rawData, design, pageIntent, sectionRoles, materialLanguage, componentLibrary }) {
|
|
103
133
|
if (!enabled) return { applied: false, reason: 'disabled' };
|
|
104
|
-
const
|
|
105
|
-
if (!
|
|
134
|
+
const providerConfig = resolveSmartProviderConfig();
|
|
135
|
+
if (!providerConfig) {
|
|
136
|
+
return { applied: false, reason: 'no API key (set OPENAI_API_KEY, ATLASCLOUD_API_KEY, or ANTHROPIC_API_KEY)' };
|
|
137
|
+
}
|
|
106
138
|
|
|
107
139
|
const digest = buildDigest({ rawData, design, pageIntent });
|
|
108
140
|
const updates = {};
|
|
@@ -118,13 +150,13 @@ export async function refineWithSmart({ enabled, rawData, design, pageIntent, se
|
|
|
118
150
|
if (!spec) continue;
|
|
119
151
|
const user = `Digest:\n${digest}\n\nCurrent heuristic result:\n${JSON.stringify(current)}\n\nRespond with the requested JSON.`;
|
|
120
152
|
try {
|
|
121
|
-
const raw = await callLLM(
|
|
153
|
+
const raw = await callLLM(providerConfig, spec.system, user);
|
|
122
154
|
const parsed = parseJsonLoose(raw);
|
|
123
|
-
if (parsed) updates[task] = { ...parsed, smart: true, provider };
|
|
155
|
+
if (parsed) updates[task] = { ...parsed, smart: true, provider: providerConfig.provider };
|
|
124
156
|
} catch (e) {
|
|
125
157
|
errors.push(`${task}: ${e.message}`);
|
|
126
158
|
}
|
|
127
159
|
}
|
|
128
160
|
|
|
129
|
-
return { applied: true, provider, updates, errors };
|
|
161
|
+
return { applied: true, provider: providerConfig.provider, updates, errors };
|
|
130
162
|
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
// GSAP emitter — `<host>-motion.gsap.js`.
|
|
2
|
+
//
|
|
3
|
+
// Targets GreenSock (gsap). The extracted cubic-bezier curves are registered
|
|
4
|
+
// as named `CustomEase`s (so the site's exact feel is reproducible), durations
|
|
5
|
+
// come through as seconds, and we emit `gsap.from()` reveal helpers plus a
|
|
6
|
+
// ScrollTrigger reveal when the page actually uses scroll-/view-timeline.
|
|
7
|
+
//
|
|
8
|
+
// We emit:
|
|
9
|
+
// • `eases` — CustomEase SVG-path strings keyed by family
|
|
10
|
+
// • `durations` — extracted timings in seconds
|
|
11
|
+
// • `registerEases(gsap)` — registers every ease as a named CustomEase
|
|
12
|
+
// • `reveals` — gsap.from() helpers (fadeIn / slideUp / scaleIn / pop)
|
|
13
|
+
// • `revealOnScroll()` — ScrollTrigger batch reveal (only when scroll-linked)
|
|
14
|
+
|
|
15
|
+
function bezierPts(raw) {
|
|
16
|
+
if (!raw) return null;
|
|
17
|
+
const m = String(raw).match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/i);
|
|
18
|
+
if (m) return [parseFloat(m[1]), parseFloat(m[2]), parseFloat(m[3]), parseFloat(m[4])];
|
|
19
|
+
const named = {
|
|
20
|
+
linear: [0, 0, 1, 1], ease: [0.25, 0.1, 0.25, 1],
|
|
21
|
+
'ease-in': [0.42, 0, 1, 1], 'ease-out': [0, 0, 0.58, 1], 'ease-in-out': [0.42, 0, 0.58, 1],
|
|
22
|
+
};
|
|
23
|
+
return named[String(raw).trim()] || null;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function camel(s) {
|
|
27
|
+
return String(s || '').replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, '_$&');
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// GSAP CustomEase accepts SVG cubic-path data; a bezier from (0,0)→(1,1) with
|
|
31
|
+
// the two extracted control points maps directly to one cubic segment.
|
|
32
|
+
function customEasePath([x1, y1, x2, y2]) {
|
|
33
|
+
return `M0,0 C${x1},${y1} ${x2},${y2} 1,1`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export function formatMotionGsap(design) {
|
|
37
|
+
const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
|
|
38
|
+
const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
|
|
39
|
+
const easings = Array.isArray(design?.motion?.easings) ? design.motion.easings : [];
|
|
40
|
+
const springs = Array.isArray(design?.motion?.springs) ? design.motion.springs : [];
|
|
41
|
+
const scroll = design?.motion?.scrollLinked || { present: false, signals: [] };
|
|
42
|
+
|
|
43
|
+
const durSec = (d) => ((d.ms || parseInt(d.css || d.value || d, 10) || 300) / 1000);
|
|
44
|
+
const defaultDur = durations.length ? durSec(durations[Math.min(2, durations.length - 1)]) : 0.3;
|
|
45
|
+
|
|
46
|
+
// Eases: dedupe by family, most-used first, fall back to a standard curve.
|
|
47
|
+
const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
|
|
48
|
+
const easeEntries = [];
|
|
49
|
+
sortedEase.forEach((e, i) => {
|
|
50
|
+
const pts = bezierPts(e.raw);
|
|
51
|
+
if (!pts) return;
|
|
52
|
+
const key = e.family && e.family !== 'custom' ? camel(e.family) : `custom${i + 1}`;
|
|
53
|
+
if (easeEntries.find((x) => x.key === key)) return;
|
|
54
|
+
easeEntries.push({ key, path: customEasePath(pts), count: e.count });
|
|
55
|
+
});
|
|
56
|
+
springs.forEach((s) => {
|
|
57
|
+
const pts = bezierPts(s.raw);
|
|
58
|
+
if (pts && !easeEntries.find((x) => x.key === 'spring')) {
|
|
59
|
+
easeEntries.push({ key: 'spring', path: customEasePath(pts), count: s.count });
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
if (easeEntries.length === 0) {
|
|
63
|
+
easeEntries.push({ key: 'standard', path: customEasePath([0.25, 0.1, 0.25, 1]), count: 0 });
|
|
64
|
+
}
|
|
65
|
+
const primaryEaseKey = easeEntries[0].key;
|
|
66
|
+
|
|
67
|
+
const lines = [
|
|
68
|
+
'// GSAP presets — generated by designlang (motionlang)',
|
|
69
|
+
`// Source: ${design?.meta?.url || host}`,
|
|
70
|
+
`// ${new Date().toISOString()}`,
|
|
71
|
+
'//',
|
|
72
|
+
"// import gsap from 'gsap';",
|
|
73
|
+
`// import { registerEases, reveals } from './${host}-motion.gsap.js';`,
|
|
74
|
+
'// registerEases(gsap); // one-time: registers CustomEases',
|
|
75
|
+
"// reveals.slideUp('.card');",
|
|
76
|
+
'',
|
|
77
|
+
'/** CustomEase path data extracted from the live page, keyed by family. */',
|
|
78
|
+
'export const eases = {',
|
|
79
|
+
];
|
|
80
|
+
for (const { key, path, count } of easeEntries) {
|
|
81
|
+
lines.push(` ${key}: '${path}',${count ? ` // ${count}× on page` : ''}`);
|
|
82
|
+
}
|
|
83
|
+
lines.push('};', '');
|
|
84
|
+
|
|
85
|
+
lines.push('/** Duration presets (seconds), extracted from the live page. */');
|
|
86
|
+
lines.push('export const durations = {');
|
|
87
|
+
if (durations.length) {
|
|
88
|
+
for (const d of durations) lines.push(` ${camel(d.name || `ms${d.ms}`)}: ${durSec(d)},`);
|
|
89
|
+
} else {
|
|
90
|
+
lines.push(' fast: 0.15,', ' base: 0.3,', ' slow: 0.5,');
|
|
91
|
+
}
|
|
92
|
+
lines.push('};', '');
|
|
93
|
+
|
|
94
|
+
lines.push('/** Register every extracted curve as a named GSAP CustomEase. Call once. */');
|
|
95
|
+
lines.push('export function registerEases(gsap) {');
|
|
96
|
+
lines.push(' const CustomEase = gsap.plugins?.CustomEase || (typeof window !== \'undefined\' && window.CustomEase);');
|
|
97
|
+
lines.push(' if (!CustomEase) {');
|
|
98
|
+
lines.push(" console.warn('[motion.gsap] CustomEase plugin not registered — call gsap.registerPlugin(CustomEase) first.');");
|
|
99
|
+
lines.push(' return;');
|
|
100
|
+
lines.push(' }');
|
|
101
|
+
lines.push(' for (const [name, path] of Object.entries(eases)) CustomEase.create(name, path);');
|
|
102
|
+
lines.push('}');
|
|
103
|
+
lines.push('');
|
|
104
|
+
|
|
105
|
+
lines.push('/** gsap.from() reveal helpers. Pass any GSAP target + optional vars override. */');
|
|
106
|
+
lines.push('export const reveals = {');
|
|
107
|
+
lines.push(` fadeIn: (target, vars = {}) => gsap.from(target, { opacity: 0, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
|
|
108
|
+
lines.push(` slideUp: (target, vars = {}) => gsap.from(target, { opacity: 0, y: 24, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
|
|
109
|
+
lines.push(` slideDown: (target, vars = {}) => gsap.from(target, { opacity: 0, y: -24, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
|
|
110
|
+
lines.push(` scaleIn: (target, vars = {}) => gsap.from(target, { opacity: 0, scale: 0.96, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
|
|
111
|
+
lines.push(` pop: (target, vars = {}) => gsap.from(target, { scale: 0.9, duration: ${defaultDur}, ease: '${easeEntries.find((e) => e.key === 'spring') ? 'spring' : primaryEaseKey}', ...vars }),`);
|
|
112
|
+
lines.push('};', '');
|
|
113
|
+
|
|
114
|
+
if (scroll.present) {
|
|
115
|
+
lines.push('/** Site uses scroll-/view-timeline. Batch-reveals elements as they enter. */');
|
|
116
|
+
lines.push('/** Requires: gsap.registerPlugin(ScrollTrigger). */');
|
|
117
|
+
lines.push('export function revealOnScroll(targets, vars = {}) {');
|
|
118
|
+
lines.push(' return gsap.utils.toArray(targets).map((el) =>');
|
|
119
|
+
lines.push(' gsap.from(el, {');
|
|
120
|
+
lines.push(` opacity: 0, y: 24, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars,`);
|
|
121
|
+
lines.push(" scrollTrigger: { trigger: el, start: 'top 85%', toggleActions: 'play none none reverse' },");
|
|
122
|
+
lines.push(' }));');
|
|
123
|
+
lines.push('}');
|
|
124
|
+
lines.push('');
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
lines.push('export default { eases, durations, registerEases, reveals };');
|
|
128
|
+
lines.push('');
|
|
129
|
+
|
|
130
|
+
return lines.join('\n');
|
|
131
|
+
}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
// Web Animations API emitter — `<host>-motion.waapi.js`.
|
|
2
|
+
//
|
|
3
|
+
// The zero-dependency sibling of the Motion One / Framer emitters. Everything
|
|
4
|
+
// here runs on the browser-native `Element.animate()` — no runtime, no bundle
|
|
5
|
+
// cost. WAAPI accepts cubic-bezier easing strings verbatim, so the extracted
|
|
6
|
+
// curves are reproduced *exactly* (no spring approximation, unlike the
|
|
7
|
+
// library targets).
|
|
8
|
+
//
|
|
9
|
+
// We emit:
|
|
10
|
+
// • `easings` — the page's cubic-bezier strings, keyed by family
|
|
11
|
+
// • `durations` — extracted timings in milliseconds
|
|
12
|
+
// • `keyframes` — keyframe arrays reconstructed from on-page @keyframes,
|
|
13
|
+
// ready to hand straight to `el.animate(frames, timing)`
|
|
14
|
+
// • `animations`— fadeIn / slideUp / scaleIn … helpers returning the live
|
|
15
|
+
// Animation object so callers can await `.finished`
|
|
16
|
+
// • a `prefersReducedMotion()` guard the helpers honour automatically.
|
|
17
|
+
|
|
18
|
+
function bezier(raw) {
|
|
19
|
+
if (!raw) return null;
|
|
20
|
+
const m = String(raw).match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/i);
|
|
21
|
+
if (m) return `cubic-bezier(${m[1]}, ${m[2]}, ${m[3]}, ${m[4]})`;
|
|
22
|
+
const named = new Set(['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']);
|
|
23
|
+
return named.has(String(raw).trim()) ? String(raw).trim() : null;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function camel(s) {
|
|
27
|
+
return String(s || '').replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, '_$&');
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export function formatMotionWaapi(design) {
|
|
31
|
+
const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
|
|
32
|
+
const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
|
|
33
|
+
const easings = Array.isArray(design?.motion?.easings) ? design.motion.easings : [];
|
|
34
|
+
const springs = Array.isArray(design?.motion?.springs) ? design.motion.springs : [];
|
|
35
|
+
const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
|
|
36
|
+
|
|
37
|
+
const ms = (d) => (d.ms || parseInt(d.css || d.value || d, 10) || 300);
|
|
38
|
+
const defaultDur = durations.length ? ms(durations[Math.min(2, durations.length - 1)]) : 300;
|
|
39
|
+
|
|
40
|
+
// Easings: dedupe by family, keep the most-used first, fall back to a
|
|
41
|
+
// standard curve when the page exposed nothing parseable.
|
|
42
|
+
const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
|
|
43
|
+
const easeEntries = [];
|
|
44
|
+
sortedEase.forEach((e, i) => {
|
|
45
|
+
const css = bezier(e.raw);
|
|
46
|
+
if (!css) return;
|
|
47
|
+
const key = e.family && e.family !== 'custom' ? camel(e.family) : `custom${i + 1}`;
|
|
48
|
+
if (easeEntries.find((x) => x.key === key)) return;
|
|
49
|
+
easeEntries.push({ key, css, count: e.count });
|
|
50
|
+
});
|
|
51
|
+
// Detected overshoot beziers ride along as a `spring` easing (WAAPI honours
|
|
52
|
+
// the overshoot natively — the curve simply leaves the [0,1] band).
|
|
53
|
+
springs.forEach((s) => {
|
|
54
|
+
const css = bezier(s.raw);
|
|
55
|
+
if (css && !easeEntries.find((x) => x.key === 'spring')) easeEntries.push({ key: 'spring', css, count: s.count });
|
|
56
|
+
});
|
|
57
|
+
if (easeEntries.length === 0) {
|
|
58
|
+
easeEntries.push({ key: 'standard', css: 'cubic-bezier(0.25, 0.1, 0.25, 1)', count: 0 });
|
|
59
|
+
}
|
|
60
|
+
const primaryEaseKey = easeEntries[0].key;
|
|
61
|
+
|
|
62
|
+
const lines = [
|
|
63
|
+
'// Web Animations API presets — generated by designlang (motionlang)',
|
|
64
|
+
`// Source: ${design?.meta?.url || host}`,
|
|
65
|
+
`// ${new Date().toISOString()}`,
|
|
66
|
+
'//',
|
|
67
|
+
'// Zero-dependency. Runs on the browser-native Element.animate().',
|
|
68
|
+
`// import { animations } from './${host}-motion.waapi.js';`,
|
|
69
|
+
"// animations.fadeIn(document.querySelector('#hero'));",
|
|
70
|
+
"// await animations.slideUp(card, { delay: 80 }).finished;",
|
|
71
|
+
'',
|
|
72
|
+
'/** Easing curves extracted from the live page, as WAAPI easing strings. */',
|
|
73
|
+
'export const easings = {',
|
|
74
|
+
];
|
|
75
|
+
for (const { key, css, count } of easeEntries) {
|
|
76
|
+
lines.push(` ${key}: '${css}',${count ? ` // ${count}× on page` : ''}`);
|
|
77
|
+
}
|
|
78
|
+
lines.push('};', '');
|
|
79
|
+
|
|
80
|
+
lines.push('/** Duration presets (milliseconds), extracted from the live page. */');
|
|
81
|
+
lines.push('export const durations = {');
|
|
82
|
+
if (durations.length) {
|
|
83
|
+
for (const d of durations) lines.push(` ${camel(d.name || `ms${d.ms}`)}: ${ms(d)},`);
|
|
84
|
+
} else {
|
|
85
|
+
lines.push(' fast: 150,', ' base: 300,', ' slow: 500,');
|
|
86
|
+
}
|
|
87
|
+
lines.push('};', '');
|
|
88
|
+
|
|
89
|
+
// Reconstructed keyframes — WAAPI takes an array of frame objects, so each
|
|
90
|
+
// step's `prop: value` pairs become one frame.
|
|
91
|
+
const usedKeyframes = keyframes.filter((k) => k.used && k.steps && k.steps.length);
|
|
92
|
+
if (usedKeyframes.length) {
|
|
93
|
+
lines.push('/** @keyframes blocks reconstructed as WAAPI keyframe arrays. */');
|
|
94
|
+
lines.push('export const keyframes = {');
|
|
95
|
+
for (const kf of usedKeyframes.slice(0, 16)) {
|
|
96
|
+
const frames = [];
|
|
97
|
+
for (const step of kf.steps) {
|
|
98
|
+
const frame = {};
|
|
99
|
+
for (const part of (step.style || '').split(';')) {
|
|
100
|
+
const [p, v] = part.split(':').map((x) => (x || '').trim());
|
|
101
|
+
if (p && v) frame[camel(p)] = v;
|
|
102
|
+
}
|
|
103
|
+
const offset = parseFloat(String(step.offset)) / 100;
|
|
104
|
+
if (Number.isFinite(offset)) frame.offset = offset;
|
|
105
|
+
if (Object.keys(frame).length) frames.push(frame);
|
|
106
|
+
}
|
|
107
|
+
if (frames.length >= 2) lines.push(` ${camel(kf.name)}: ${JSON.stringify(frames)},`);
|
|
108
|
+
}
|
|
109
|
+
lines.push('};', '');
|
|
110
|
+
} else {
|
|
111
|
+
lines.push('/** No on-page @keyframes were attached to elements; emit empty for shape parity. */');
|
|
112
|
+
lines.push('export const keyframes = {};', '');
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
lines.push('/** Honours the user\'s reduced-motion preference. */');
|
|
116
|
+
lines.push('export const prefersReducedMotion = () =>');
|
|
117
|
+
lines.push(" typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;");
|
|
118
|
+
lines.push('');
|
|
119
|
+
lines.push(`const _timing = { duration: ${defaultDur}, easing: easings.${primaryEaseKey}, fill: 'both' };`);
|
|
120
|
+
lines.push('');
|
|
121
|
+
lines.push('function _animate(el, frames, opts = {}) {');
|
|
122
|
+
lines.push(' const timing = { ..._timing, ...opts };');
|
|
123
|
+
lines.push(' if (prefersReducedMotion()) timing.duration = 0;');
|
|
124
|
+
lines.push(' return el.animate(frames, timing);');
|
|
125
|
+
lines.push('}');
|
|
126
|
+
lines.push('');
|
|
127
|
+
lines.push('/** Animate-on-call helpers. Each returns the live Animation (await `.finished`). */');
|
|
128
|
+
lines.push('export const animations = {');
|
|
129
|
+
lines.push(' fadeIn: (el, opts = {}) => _animate(el, [{ opacity: 0 }, { opacity: 1 }], opts),');
|
|
130
|
+
lines.push(' fadeOut: (el, opts = {}) => _animate(el, [{ opacity: 1 }, { opacity: 0 }], opts),');
|
|
131
|
+
lines.push(" slideUp: (el, opts = {}) => _animate(el, [{ opacity: 0, transform: 'translateY(16px)' }, { opacity: 1, transform: 'translateY(0)' }], opts),");
|
|
132
|
+
lines.push(" slideDown: (el, opts = {}) => _animate(el, [{ opacity: 0, transform: 'translateY(-16px)' }, { opacity: 1, transform: 'translateY(0)' }], opts),");
|
|
133
|
+
lines.push(" scaleIn: (el, opts = {}) => _animate(el, [{ opacity: 0, transform: 'scale(0.96)' }, { opacity: 1, transform: 'scale(1)' }], opts),");
|
|
134
|
+
lines.push('};', '');
|
|
135
|
+
|
|
136
|
+
lines.push('export default { easings, durations, keyframes, animations, prefersReducedMotion };');
|
|
137
|
+
lines.push('');
|
|
138
|
+
|
|
139
|
+
return lines.join('\n');
|
|
140
|
+
}
|