@luisitoluis/viewfx 0.0.3 → 0.0.4
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/README.es.md +15 -13
- package/README.md +15 -13
- package/package.json +2 -2
- package/src/compound.cjs +1 -1
- package/src/index.css +1 -1
package/README.es.md
CHANGED
|
@@ -5,20 +5,22 @@
|
|
|
5
5
|
[](./README.md)
|
|
6
6
|
[](./README.es.md)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
[](https://github.com/LuisitoLuis/viewfx/stargazers)
|
|
9
|
+
[](https://github.com/LuisitoLuis/viewfx/forks)
|
|
10
|
+
[](https://github.com/LuisitoLuis/viewfx/pulls)
|
|
11
|
+
[](https://github.com/LuisitoLuis/viewfx/issues)
|
|
12
|
+
[](https://github.com/LuisitoLuis/viewfx/graphs/contributors)
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
[](https://www.npmjs.com/package/@luisitoluis/viewfx)
|
|
18
18
|
|
|
19
19
|
Transiciones de tema con una sola clase de Tailwind en <code><html></code>.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Paquete: [`@luisitoluis/viewfx`](https://www.npmjs.com/package/@luisitoluis/viewfx)
|
|
22
|
+
|
|
23
|
+
Visita el [repositorio en GitHub](https://github.com/LuisitoLuis/viewfx) para obtener más información.
|
|
22
24
|
|
|
23
25
|
</div>
|
|
24
26
|
|
|
@@ -31,19 +33,19 @@ Visita la [web](https://viewfx.luismc.dev) o el [playground](https://viewfx.luis
|
|
|
31
33
|
- npm
|
|
32
34
|
|
|
33
35
|
```bash
|
|
34
|
-
npm install viewfx
|
|
36
|
+
npm install @luisitoluis/viewfx
|
|
35
37
|
```
|
|
36
38
|
|
|
37
39
|
- pnpm
|
|
38
40
|
|
|
39
41
|
```bash
|
|
40
|
-
pnpm add viewfx
|
|
42
|
+
pnpm add @luisitoluis/viewfx
|
|
41
43
|
```
|
|
42
44
|
|
|
43
45
|
- yarn
|
|
44
46
|
|
|
45
47
|
```bash
|
|
46
|
-
yarn add viewfx
|
|
48
|
+
yarn add @luisitoluis/viewfx
|
|
47
49
|
```
|
|
48
50
|
|
|
49
51
|
#### Implementación del plugin
|
|
@@ -53,7 +55,7 @@ yarn add viewfx
|
|
|
53
55
|
```css
|
|
54
56
|
/* globals.css (para Tailwind CSS 4.*) */
|
|
55
57
|
@import 'tailwindcss';
|
|
56
|
-
@import 'viewfx';
|
|
58
|
+
@import '@luisitoluis/viewfx';
|
|
57
59
|
```
|
|
58
60
|
|
|
59
61
|
> Tailwind CSS v3 — registra el plugin de JavaScript:
|
|
@@ -62,7 +64,7 @@ yarn add viewfx
|
|
|
62
64
|
/** @type {import('tailwindcss').Config} */
|
|
63
65
|
module.exports = {
|
|
64
66
|
plugins: [
|
|
65
|
-
require('viewfx')
|
|
67
|
+
require('@luisitoluis/viewfx')
|
|
66
68
|
]
|
|
67
69
|
}
|
|
68
70
|
```
|
|
@@ -98,7 +100,7 @@ El tema se espera como clase `.dark` en `<html>` (el wipe `polygon` se invierte
|
|
|
98
100
|
|
|
99
101
|
### Efectos
|
|
100
102
|
|
|
101
|
-
30 utilidades. Pasa el ratón para previsualizar y haz clic para copiar en el [catálogo](https://viewfx
|
|
103
|
+
30 utilidades. Pasa el ratón para previsualizar y haz clic para copiar en el [catálogo](https://github.com/LuisitoLuis/viewfx#effects).
|
|
102
104
|
|
|
103
105
|
`circle`, `circle-blur`, `polygon`, `corner-tl`, `corner-tr`, `corner-bl`, `corner-br`, `iris`, `diamond`, `hexagon`, `square`, `soft`, `heart`, `expand`, `split`, `shutter`, `ink`, `spiral`, `wipe-h`, `wipe-left`, `wipe-v`, `slide-down`, `venetian`, `glitch`, `slide`, `lift`, `zoom`, `rotate`, `fade`, `dissolve`.
|
|
104
106
|
|
package/README.md
CHANGED
|
@@ -5,20 +5,22 @@
|
|
|
5
5
|
[](./README.md)
|
|
6
6
|
[](./README.es.md)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
[](https://github.com/LuisitoLuis/viewfx/stargazers)
|
|
9
|
+
[](https://github.com/LuisitoLuis/viewfx/forks)
|
|
10
|
+
[](https://github.com/LuisitoLuis/viewfx/pulls)
|
|
11
|
+
[](https://github.com/LuisitoLuis/viewfx/issues)
|
|
12
|
+
[](https://github.com/LuisitoLuis/viewfx/graphs/contributors)
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
[](https://www.npmjs.com/package/@luisitoluis/viewfx)
|
|
18
18
|
|
|
19
19
|
Theme transitions with one Tailwind class on <code><html></code>.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Package: [`@luisitoluis/viewfx`](https://www.npmjs.com/package/@luisitoluis/viewfx)
|
|
22
|
+
|
|
23
|
+
Visit the [GitHub repository](https://github.com/LuisitoLuis/viewfx) to get more information.
|
|
22
24
|
|
|
23
25
|
</div>
|
|
24
26
|
|
|
@@ -31,19 +33,19 @@ Visit the [website](https://viewfx.luismc.dev) or the [playground](https://viewf
|
|
|
31
33
|
- npm
|
|
32
34
|
|
|
33
35
|
```bash
|
|
34
|
-
npm install viewfx
|
|
36
|
+
npm install @luisitoluis/viewfx
|
|
35
37
|
```
|
|
36
38
|
|
|
37
39
|
- pnpm
|
|
38
40
|
|
|
39
41
|
```bash
|
|
40
|
-
pnpm add viewfx
|
|
42
|
+
pnpm add @luisitoluis/viewfx
|
|
41
43
|
```
|
|
42
44
|
|
|
43
45
|
- yarn
|
|
44
46
|
|
|
45
47
|
```bash
|
|
46
|
-
yarn add viewfx
|
|
48
|
+
yarn add @luisitoluis/viewfx
|
|
47
49
|
```
|
|
48
50
|
|
|
49
51
|
#### Plugin Implementation
|
|
@@ -53,7 +55,7 @@ yarn add viewfx
|
|
|
53
55
|
```css
|
|
54
56
|
/* globals.css (for Tailwind CSS 4.*) */
|
|
55
57
|
@import 'tailwindcss';
|
|
56
|
-
@import 'viewfx';
|
|
58
|
+
@import '@luisitoluis/viewfx';
|
|
57
59
|
```
|
|
58
60
|
|
|
59
61
|
> Tailwind CSS v3 — register the JavaScript plugin:
|
|
@@ -62,7 +64,7 @@ yarn add viewfx
|
|
|
62
64
|
/** @type {import('tailwindcss').Config} */
|
|
63
65
|
module.exports = {
|
|
64
66
|
plugins: [
|
|
65
|
-
require('viewfx')
|
|
67
|
+
require('@luisitoluis/viewfx')
|
|
66
68
|
]
|
|
67
69
|
}
|
|
68
70
|
```
|
|
@@ -98,7 +100,7 @@ Theme is expected as a `.dark` class on `<html>` (the `polygon` wipe reverses in
|
|
|
98
100
|
|
|
99
101
|
### Effects
|
|
100
102
|
|
|
101
|
-
30 utilities. Hover to preview and click to copy on the [catalogue](https://viewfx
|
|
103
|
+
30 utilities. Hover to preview and click to copy on the [catalogue](https://github.com/LuisitoLuis/viewfx#effects).
|
|
102
104
|
|
|
103
105
|
`circle`, `circle-blur`, `polygon`, `corner-tl`, `corner-tr`, `corner-bl`, `corner-br`, `iris`, `diamond`, `hexagon`, `square`, `soft`, `heart`, `expand`, `split`, `shutter`, `ink`, `spiral`, `wipe-h`, `wipe-left`, `wipe-v`, `slide-down`, `venetian`, `glitch`, `slide`, `lift`, `zoom`, `rotate`, `fade`, `dissolve`.
|
|
104
106
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luisitoluis/viewfx",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Tailwind CSS v3/v4 plugin for View Transitions theme effects",
|
|
5
5
|
"style": "./src/index.css",
|
|
6
6
|
"main": "./src/plugin.cjs",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"type": "git",
|
|
26
26
|
"url": "git+https://github.com/LuisitoLuis/viewfx.git"
|
|
27
27
|
},
|
|
28
|
-
"homepage": "https://viewfx
|
|
28
|
+
"homepage": "https://github.com/LuisitoLuis/viewfx",
|
|
29
29
|
"type": "module",
|
|
30
30
|
"scripts": {
|
|
31
31
|
"emit:masks": "node scripts/emit-masks.mjs",
|
package/src/compound.cjs
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* circle-duration-1000-delay-300
|
|
5
5
|
*
|
|
6
6
|
* Tailwind v4 only allows one `*` in `@utility` names, so these are registered
|
|
7
|
-
* from JS (`@plugin` in v4, `require('viewfx')` in v3).
|
|
7
|
+
* from JS (`@plugin` in v4, `require('@luisitoluis/viewfx')` in v3).
|
|
8
8
|
*/
|
|
9
9
|
const plugin = require('tailwindcss/plugin')
|
|
10
10
|
const effects = require('./effects.cjs')
|
package/src/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* viewfx
|
|
3
3
|
* Tailwind CSS v4 entry — View Transitions theme effects.
|
|
4
|
-
* Tailwind v3 uses `src/plugin.cjs` (`require('viewfx')`).
|
|
4
|
+
* Tailwind v3 uses `src/plugin.cjs` (`require('@luisitoluis/viewfx')`).
|
|
5
5
|
* Keep `@utility` blocks in sync with `src/effects.cjs`.
|
|
6
6
|
*/
|
|
7
7
|
|