@plasmicpkgs/react-parallax-tilt 0.0.2 → 0.0.3
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/dist/react-parallax-tilt.cjs.development.js +81 -43
- package/dist/react-parallax-tilt.cjs.development.js.map +1 -1
- package/dist/react-parallax-tilt.cjs.production.min.js +1 -1
- package/dist/react-parallax-tilt.cjs.production.min.js.map +1 -1
- package/dist/react-parallax-tilt.esm.js +81 -43
- package/dist/react-parallax-tilt.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -53,115 +53,153 @@ var parallaxTiltMeta = {
|
|
|
53
53
|
},
|
|
54
54
|
tiltEnable: {
|
|
55
55
|
type: "boolean",
|
|
56
|
-
|
|
57
|
-
description: "Enable tilt effect"
|
|
56
|
+
defaultValueHint: true,
|
|
57
|
+
description: "Enable tilt effect",
|
|
58
|
+
displayName: "Enable"
|
|
58
59
|
},
|
|
59
60
|
tiltReverse: {
|
|
60
61
|
type: "boolean",
|
|
61
|
-
|
|
62
|
-
description: "Reverse tilt direction"
|
|
62
|
+
defaultValueHint: false,
|
|
63
|
+
description: "Reverse tilt direction",
|
|
64
|
+
displayName: "Reverse"
|
|
63
65
|
},
|
|
64
66
|
tiltAngleXInitial: {
|
|
65
67
|
type: "number",
|
|
66
|
-
|
|
67
|
-
description: "Initial tilt angle in degrees on X axis"
|
|
68
|
+
defaultValueHint: 0,
|
|
69
|
+
description: "Initial tilt angle in degrees on X axis",
|
|
70
|
+
displayName: "Angle X Initial"
|
|
68
71
|
},
|
|
69
72
|
tiltAngleYInitial: {
|
|
70
73
|
type: "number",
|
|
71
|
-
|
|
72
|
-
description: "Initial tilt angle in degrees on Y axis"
|
|
74
|
+
defaultValueHint: 0,
|
|
75
|
+
description: "Initial tilt angle in degrees on Y axis",
|
|
76
|
+
displayName: "Angle Y Initial"
|
|
73
77
|
},
|
|
74
78
|
tiltMaxAngleX: {
|
|
75
79
|
type: "number",
|
|
76
|
-
|
|
77
|
-
description: "Maximum tilt angle in degrees on X axis"
|
|
80
|
+
defaultValueHint: 20,
|
|
81
|
+
description: "Maximum tilt angle in degrees on X axis",
|
|
82
|
+
displayName: "Max Angle X"
|
|
78
83
|
},
|
|
79
84
|
tiltMaxAngleY: {
|
|
80
85
|
type: "number",
|
|
81
|
-
|
|
82
|
-
description: "Maximum tilt angle in degrees on Y axis"
|
|
86
|
+
defaultValueHint: 20,
|
|
87
|
+
description: "Maximum tilt angle in degrees on Y axis",
|
|
88
|
+
displayName: "Max Angle Y"
|
|
83
89
|
},
|
|
84
90
|
tiltAxis: {
|
|
85
91
|
type: "choice",
|
|
86
92
|
options: ["x", "y"],
|
|
87
|
-
description: "Which axis should be enabled
|
|
93
|
+
description: "Which axis should be enabled",
|
|
94
|
+
defaultValueHint: "both",
|
|
95
|
+
displayName: "Axis"
|
|
88
96
|
},
|
|
89
97
|
glareEnable: {
|
|
90
98
|
type: "boolean",
|
|
91
|
-
|
|
92
|
-
description: "Enable glare effect"
|
|
99
|
+
defaultValueHint: false,
|
|
100
|
+
description: "Enable glare effect",
|
|
101
|
+
displayName: "Glare Enable"
|
|
93
102
|
},
|
|
94
103
|
glareMaxOpacity: {
|
|
95
104
|
type: "number",
|
|
96
|
-
|
|
97
|
-
description: "Maximum opacity of glare effect"
|
|
105
|
+
defaultValueHint: 0.7,
|
|
106
|
+
description: "Maximum opacity of glare effect",
|
|
107
|
+
displayName: "Glare Max Opacity",
|
|
108
|
+
hidden: function hidden(props) {
|
|
109
|
+
return !props.glareEnable;
|
|
110
|
+
}
|
|
98
111
|
},
|
|
99
112
|
glareColor: {
|
|
100
113
|
// TODO replace with color picker
|
|
101
114
|
type: "string",
|
|
102
|
-
|
|
103
|
-
description: "Color of glare effect"
|
|
115
|
+
defaultValueHint: "#ffffff",
|
|
116
|
+
description: "Color of glare effect",
|
|
117
|
+
displayName: "Glare Color",
|
|
118
|
+
hidden: function hidden(props) {
|
|
119
|
+
return !props.glareEnable;
|
|
120
|
+
}
|
|
104
121
|
},
|
|
105
122
|
glareBorderRadius: {
|
|
106
123
|
type: "string",
|
|
107
|
-
|
|
108
|
-
description: "Border radius of glare effect"
|
|
124
|
+
defaultValueHint: '0',
|
|
125
|
+
description: "Border radius of glare effect",
|
|
126
|
+
displayName: "Glare Border Radius",
|
|
127
|
+
hidden: function hidden(props) {
|
|
128
|
+
return !props.glareEnable;
|
|
129
|
+
}
|
|
109
130
|
},
|
|
110
131
|
glarePosition: {
|
|
111
132
|
type: "choice",
|
|
112
133
|
options: ["top", "bottom", "left", "right", "all"],
|
|
113
|
-
|
|
114
|
-
description: "Position of the glare effect"
|
|
134
|
+
defaultValueHint: 'bottom',
|
|
135
|
+
description: "Position of the glare effect",
|
|
136
|
+
displayName: "Glare Position",
|
|
137
|
+
hidden: function hidden(props) {
|
|
138
|
+
return !props.glareEnable;
|
|
139
|
+
}
|
|
115
140
|
},
|
|
116
141
|
glareReverse: {
|
|
117
142
|
type: "boolean",
|
|
118
|
-
|
|
119
|
-
description: "Reverse glare direction"
|
|
143
|
+
defaultValueHint: false,
|
|
144
|
+
description: "Reverse glare direction",
|
|
145
|
+
displayName: "Glare Reverse",
|
|
146
|
+
hidden: function hidden(props) {
|
|
147
|
+
return !props.glareEnable;
|
|
148
|
+
}
|
|
120
149
|
},
|
|
121
150
|
scale: {
|
|
122
151
|
type: "number",
|
|
123
|
-
|
|
124
|
-
description: "Scale of the element"
|
|
152
|
+
defaultValueHint: 1,
|
|
153
|
+
description: "Scale of the element",
|
|
154
|
+
displayName: "Scale"
|
|
125
155
|
},
|
|
126
156
|
perspective: {
|
|
127
157
|
type: "number",
|
|
128
|
-
|
|
129
|
-
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets."
|
|
158
|
+
defaultValueHint: 1000,
|
|
159
|
+
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.",
|
|
160
|
+
displayName: "Perspective"
|
|
130
161
|
},
|
|
131
162
|
flipVertically: {
|
|
132
163
|
type: "boolean",
|
|
133
|
-
|
|
134
|
-
description: "Flip the element vertically"
|
|
164
|
+
defaultValueHint: false,
|
|
165
|
+
description: "Flip the element vertically",
|
|
166
|
+
displayName: "Flip Vertically"
|
|
135
167
|
},
|
|
136
168
|
flipHorizontally: {
|
|
137
169
|
type: "boolean",
|
|
138
|
-
|
|
139
|
-
description: "Flip the element horizontally"
|
|
170
|
+
defaultValueHint: false,
|
|
171
|
+
description: "Flip the element horizontally",
|
|
172
|
+
displayName: "Flip Horizontally"
|
|
140
173
|
},
|
|
141
174
|
reset: {
|
|
142
175
|
type: "boolean",
|
|
143
|
-
|
|
144
|
-
description: "Reset the element to its original state"
|
|
176
|
+
defaultValueHint: false,
|
|
177
|
+
description: "Reset the element to its original state",
|
|
178
|
+
displayName: "Reset"
|
|
145
179
|
},
|
|
146
180
|
transitionEasing: {
|
|
147
181
|
type: "string",
|
|
148
|
-
|
|
149
|
-
description: "Easing function for the transition"
|
|
182
|
+
defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',
|
|
183
|
+
description: "Easing function for the transition",
|
|
184
|
+
displayName: "Transition Easing"
|
|
150
185
|
},
|
|
151
186
|
transitionSpeed: {
|
|
152
187
|
type: "number",
|
|
153
|
-
|
|
154
|
-
description: "Transition speed in milliseconds"
|
|
188
|
+
defaultValueHint: 400,
|
|
189
|
+
description: "Transition speed in milliseconds",
|
|
190
|
+
displayName: "Transition Speed"
|
|
155
191
|
},
|
|
156
192
|
trackOnWindow: {
|
|
157
193
|
type: "boolean",
|
|
158
|
-
|
|
159
|
-
description: "Track the mouse position on the whole window, not just on the element"
|
|
194
|
+
defaultValueHint: false,
|
|
195
|
+
description: "Track the mouse position on the whole window, not just on the element",
|
|
196
|
+
displayName: "Track On Window"
|
|
160
197
|
},
|
|
161
198
|
gyroscope: {
|
|
162
199
|
type: "boolean",
|
|
163
|
-
|
|
164
|
-
description: "Enable device orientation detection"
|
|
200
|
+
defaultValueHint: false,
|
|
201
|
+
description: "Enable device orientation detection",
|
|
202
|
+
displayName: "Gyroscope"
|
|
165
203
|
}
|
|
166
204
|
},
|
|
167
205
|
isDefaultExport: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-parallax-tilt.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n // defaultValueHint: true,\n description: \"Enable tilt effect\",\n },\n tiltReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse tilt direction\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description:\n \"Which axis should be enabled (unset means both are enabled)\",\n },\n glareEnable: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable glare effect\",\n },\n glareMaxOpacity: {\n type: \"number\",\n // defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n // defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n },\n glareBorderRadius: {\n type: \"string\",\n // defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n // defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n },\n glareReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse glare direction\",\n },\n scale: {\n type: \"number\",\n // defaultValueHint: 1,\n description: \"Scale of the element\",\n },\n perspective: {\n type: \"number\",\n // defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n },\n flipVertically: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element horizontally\",\n },\n reset: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reset the element to its original state\",\n },\n transitionEasing: {\n type: \"string\",\n // defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n },\n transitionSpeed: {\n type: \"number\",\n // defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n },\n trackOnWindow: {\n type: \"boolean\",\n // defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n },\n gyroscope: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable device orientation detection\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","registerTilt","loader","customTiltMeta","registerComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-parallax-tilt.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n defaultValueHint: true,\n description: \"Enable tilt effect\",\n displayName: \"Enable\",\n },\n tiltReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse tilt direction\",\n displayName: \"Reverse\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n displayName: \"Angle X Initial\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n displayName: \"Angle Y Initial\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n displayName: \"Max Angle X\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n displayName: \"Max Angle Y\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description: \"Which axis should be enabled\",\n defaultValueHint: \"both\",\n displayName: \"Axis\",\n },\n glareEnable: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable glare effect\",\n displayName: \"Glare Enable\",\n },\n glareMaxOpacity: {\n type: \"number\",\n defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n displayName: \"Glare Max Opacity\",\n hidden: (props) => !props.glareEnable,\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n displayName: \"Glare Color\",\n hidden: (props) => !props.glareEnable,\n },\n glareBorderRadius: {\n type: \"string\",\n defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n displayName: \"Glare Border Radius\",\n hidden: (props) => !props.glareEnable,\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n displayName: \"Glare Position\",\n hidden: (props) => !props.glareEnable,\n },\n glareReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse glare direction\",\n displayName: \"Glare Reverse\",\n hidden: (props) => !props.glareEnable,\n },\n scale: {\n type: \"number\",\n defaultValueHint: 1,\n description: \"Scale of the element\",\n displayName: \"Scale\",\n },\n perspective: {\n type: \"number\",\n defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n displayName: \"Perspective\",\n },\n flipVertically: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element vertically\",\n displayName: \"Flip Vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element horizontally\",\n displayName: \"Flip Horizontally\",\n },\n reset: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reset the element to its original state\",\n displayName: \"Reset\",\n },\n transitionEasing: {\n type: \"string\",\n defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n displayName: \"Transition Easing\",\n },\n transitionSpeed: {\n type: \"number\",\n defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n displayName: \"Transition Speed\",\n },\n trackOnWindow: {\n type: \"boolean\",\n defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n displayName: \"Track On Window\",\n },\n gyroscope: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable device orientation detection\",\n displayName: \"Gyroscope\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","defaultValueHint","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","hidden","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","registerTilt","loader","customTiltMeta","registerComponent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),i=e(require("react")),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),i=e(require("react")),a=e(require("react-parallax-tilt"));function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a])}return e}).apply(this,arguments)}function n(e){var t;return i.createElement(a,Object.assign({},e,{style:l({transformStyle:"preserve-3d"},null!=(t=e.style)?t:{})}))}var r={name:"hostless-parallax-tilt",displayName:"Tilt",importName:"Tilt",importPath:"@plasmicpkgs/react-parallax-tilt",props:{children:{type:"slot",defaultValue:{type:"img",src:"https://placekitten.com/300/200",style:{maxWidth:"100%"}}},tiltEnable:{type:"boolean",defaultValueHint:!0,description:"Enable tilt effect",displayName:"Enable"},tiltReverse:{type:"boolean",defaultValueHint:!1,description:"Reverse tilt direction",displayName:"Reverse"},tiltAngleXInitial:{type:"number",defaultValueHint:0,description:"Initial tilt angle in degrees on X axis",displayName:"Angle X Initial"},tiltAngleYInitial:{type:"number",defaultValueHint:0,description:"Initial tilt angle in degrees on Y axis",displayName:"Angle Y Initial"},tiltMaxAngleX:{type:"number",defaultValueHint:20,description:"Maximum tilt angle in degrees on X axis",displayName:"Max Angle X"},tiltMaxAngleY:{type:"number",defaultValueHint:20,description:"Maximum tilt angle in degrees on Y axis",displayName:"Max Angle Y"},tiltAxis:{type:"choice",options:["x","y"],description:"Which axis should be enabled",defaultValueHint:"both",displayName:"Axis"},glareEnable:{type:"boolean",defaultValueHint:!1,description:"Enable glare effect",displayName:"Glare Enable"},glareMaxOpacity:{type:"number",defaultValueHint:.7,description:"Maximum opacity of glare effect",displayName:"Glare Max Opacity",hidden:function(e){return!e.glareEnable}},glareColor:{type:"string",defaultValueHint:"#ffffff",description:"Color of glare effect",displayName:"Glare Color",hidden:function(e){return!e.glareEnable}},glareBorderRadius:{type:"string",defaultValueHint:"0",description:"Border radius of glare effect",displayName:"Glare Border Radius",hidden:function(e){return!e.glareEnable}},glarePosition:{type:"choice",options:["top","bottom","left","right","all"],defaultValueHint:"bottom",description:"Position of the glare effect",displayName:"Glare Position",hidden:function(e){return!e.glareEnable}},glareReverse:{type:"boolean",defaultValueHint:!1,description:"Reverse glare direction",displayName:"Glare Reverse",hidden:function(e){return!e.glareEnable}},scale:{type:"number",defaultValueHint:1,description:"Scale of the element",displayName:"Scale"},perspective:{type:"number",defaultValueHint:1e3,description:"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.",displayName:"Perspective"},flipVertically:{type:"boolean",defaultValueHint:!1,description:"Flip the element vertically",displayName:"Flip Vertically"},flipHorizontally:{type:"boolean",defaultValueHint:!1,description:"Flip the element horizontally",displayName:"Flip Horizontally"},reset:{type:"boolean",defaultValueHint:!1,description:"Reset the element to its original state",displayName:"Reset"},transitionEasing:{type:"string",defaultValueHint:"cubic-bezier(.03,.98,.52,.99)",description:"Easing function for the transition",displayName:"Transition Easing"},transitionSpeed:{type:"number",defaultValueHint:400,description:"Transition speed in milliseconds",displayName:"Transition Speed"},trackOnWindow:{type:"boolean",defaultValueHint:!1,description:"Track the mouse position on the whole window, not just on the element",displayName:"Track On Window"},gyroscope:{type:"boolean",defaultValueHint:!1,description:"Enable device orientation detection",displayName:"Gyroscope"}},isDefaultExport:!0,defaultStyles:{maxWidth:"100%"}};exports.default=n,exports.registerTilt=function(e,i){e?e.registerComponent(n,null!=i?i:r):t(n,null!=i?i:r)};
|
|
2
2
|
//# sourceMappingURL=react-parallax-tilt.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-parallax-tilt.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n
|
|
1
|
+
{"version":3,"file":"react-parallax-tilt.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n defaultValueHint: true,\n description: \"Enable tilt effect\",\n displayName: \"Enable\",\n },\n tiltReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse tilt direction\",\n displayName: \"Reverse\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n displayName: \"Angle X Initial\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n displayName: \"Angle Y Initial\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n displayName: \"Max Angle X\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n displayName: \"Max Angle Y\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description: \"Which axis should be enabled\",\n defaultValueHint: \"both\",\n displayName: \"Axis\",\n },\n glareEnable: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable glare effect\",\n displayName: \"Glare Enable\",\n },\n glareMaxOpacity: {\n type: \"number\",\n defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n displayName: \"Glare Max Opacity\",\n hidden: (props) => !props.glareEnable,\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n displayName: \"Glare Color\",\n hidden: (props) => !props.glareEnable,\n },\n glareBorderRadius: {\n type: \"string\",\n defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n displayName: \"Glare Border Radius\",\n hidden: (props) => !props.glareEnable,\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n displayName: \"Glare Position\",\n hidden: (props) => !props.glareEnable,\n },\n glareReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse glare direction\",\n displayName: \"Glare Reverse\",\n hidden: (props) => !props.glareEnable,\n },\n scale: {\n type: \"number\",\n defaultValueHint: 1,\n description: \"Scale of the element\",\n displayName: \"Scale\",\n },\n perspective: {\n type: \"number\",\n defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n displayName: \"Perspective\",\n },\n flipVertically: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element vertically\",\n displayName: \"Flip Vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element horizontally\",\n displayName: \"Flip Horizontally\",\n },\n reset: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reset the element to its original state\",\n displayName: \"Reset\",\n },\n transitionEasing: {\n type: \"string\",\n defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n displayName: \"Transition Easing\",\n },\n transitionSpeed: {\n type: \"number\",\n defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n displayName: \"Transition Speed\",\n },\n trackOnWindow: {\n type: \"boolean\",\n defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n displayName: \"Track On Window\",\n },\n gyroscope: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable device orientation detection\",\n displayName: \"Gyroscope\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","defaultValueHint","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","hidden","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","loader","customTiltMeta","registerComponent"],"mappings":"mdAQwBA,EAAKC,gBAEzBC,gBAACC,mBACKF,GACJG,SACEC,eAAgB,wBACZJ,EAAMG,SAAS,OAM3B,IAAME,EAA6C,CACjDC,KAAM,yBACNC,YAAa,OACbC,WAAY,OACZC,WAAY,mCACZT,MAAO,CACLU,SAAU,CACRC,KAAM,OACNC,aAAc,CACZD,KAAM,MACNE,IAAK,kCACLV,MAAO,CACLW,SAAU,UAIhBC,WAAY,CACVJ,KAAM,UACNK,kBAAkB,EAClBC,YAAa,qBACbV,YAAa,UAEfW,YAAa,CACXP,KAAM,UACNK,kBAAkB,EAClBC,YAAa,yBACbV,YAAa,WAEfY,kBAAmB,CACjBR,KAAM,SACNK,iBAAkB,EAClBC,YAAa,0CACbV,YAAa,mBAEfa,kBAAmB,CACjBT,KAAM,SACNK,iBAAkB,EAClBC,YAAa,0CACbV,YAAa,mBAEfc,cAAe,CACbV,KAAM,SACNK,iBAAkB,GAClBC,YAAa,0CACbV,YAAa,eAEfe,cAAe,CACbX,KAAM,SACNK,iBAAkB,GAClBC,YAAa,0CACbV,YAAa,eAEfgB,SAAU,CACRZ,KAAM,SACNa,QAAS,CAAC,IAAK,KACfP,YAAa,+BACbD,iBAAkB,OAClBT,YAAa,QAEfkB,YAAa,CACXd,KAAM,UACNK,kBAAkB,EAClBC,YAAa,sBACbV,YAAa,gBAEfmB,gBAAiB,CACff,KAAM,SACNK,iBAAkB,GAClBC,YAAa,kCACbV,YAAa,oBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BG,WAAY,CAEVjB,KAAM,SACNK,iBAAkB,UAClBC,YAAa,wBACbV,YAAa,cACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BI,kBAAmB,CACjBlB,KAAM,SACNK,iBAAkB,IAClBC,YAAa,gCACbV,YAAa,sBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BK,cAAe,CACbnB,KAAM,SACNa,QAAS,CAAC,MAAO,SAAU,OAAQ,QAAS,OAC5CR,iBAAkB,SAClBC,YAAa,+BACbV,YAAa,iBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BM,aAAc,CACZpB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,0BACbV,YAAa,gBACboB,OAAQ,SAAC3B,UAAWA,EAAMyB,cAE5BO,MAAO,CACLrB,KAAM,SACNK,iBAAkB,EAClBC,YAAa,uBACbV,YAAa,SAEf0B,YAAa,CACXtB,KAAM,SACNK,iBAAkB,IAClBC,YACE,iJACFV,YAAa,eAEf2B,eAAgB,CACdvB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,8BACbV,YAAa,mBAEf4B,iBAAkB,CAChBxB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,gCACbV,YAAa,qBAEf6B,MAAO,CACLzB,KAAM,UACNK,kBAAkB,EAClBC,YAAa,0CACbV,YAAa,SAEf8B,iBAAkB,CAChB1B,KAAM,SACNK,iBAAkB,gCAClBC,YAAa,qCACbV,YAAa,qBAEf+B,gBAAiB,CACf3B,KAAM,SACNK,iBAAkB,IAClBC,YAAa,mCACbV,YAAa,oBAEfgC,cAAe,CACb5B,KAAM,UACNK,kBAAkB,EAClBC,YACE,wEACFV,YAAa,mBAEfiC,UAAW,CACT7B,KAAM,UACNK,kBAAkB,EAClBC,YAAa,sCACbV,YAAa,cAGjBkC,iBAAiB,EACjBC,cAAe,CACb5B,SAAU,yDAKZ6B,EACAC,GAEID,EACFA,EAAOE,kBAAkB9C,QAAM6C,EAAAA,EAAkBvC,GAEjDwC,EAAkB9C,QAAM6C,EAAAA,EAAkBvC"}
|
|
@@ -47,115 +47,153 @@ var parallaxTiltMeta = {
|
|
|
47
47
|
},
|
|
48
48
|
tiltEnable: {
|
|
49
49
|
type: "boolean",
|
|
50
|
-
|
|
51
|
-
description: "Enable tilt effect"
|
|
50
|
+
defaultValueHint: true,
|
|
51
|
+
description: "Enable tilt effect",
|
|
52
|
+
displayName: "Enable"
|
|
52
53
|
},
|
|
53
54
|
tiltReverse: {
|
|
54
55
|
type: "boolean",
|
|
55
|
-
|
|
56
|
-
description: "Reverse tilt direction"
|
|
56
|
+
defaultValueHint: false,
|
|
57
|
+
description: "Reverse tilt direction",
|
|
58
|
+
displayName: "Reverse"
|
|
57
59
|
},
|
|
58
60
|
tiltAngleXInitial: {
|
|
59
61
|
type: "number",
|
|
60
|
-
|
|
61
|
-
description: "Initial tilt angle in degrees on X axis"
|
|
62
|
+
defaultValueHint: 0,
|
|
63
|
+
description: "Initial tilt angle in degrees on X axis",
|
|
64
|
+
displayName: "Angle X Initial"
|
|
62
65
|
},
|
|
63
66
|
tiltAngleYInitial: {
|
|
64
67
|
type: "number",
|
|
65
|
-
|
|
66
|
-
description: "Initial tilt angle in degrees on Y axis"
|
|
68
|
+
defaultValueHint: 0,
|
|
69
|
+
description: "Initial tilt angle in degrees on Y axis",
|
|
70
|
+
displayName: "Angle Y Initial"
|
|
67
71
|
},
|
|
68
72
|
tiltMaxAngleX: {
|
|
69
73
|
type: "number",
|
|
70
|
-
|
|
71
|
-
description: "Maximum tilt angle in degrees on X axis"
|
|
74
|
+
defaultValueHint: 20,
|
|
75
|
+
description: "Maximum tilt angle in degrees on X axis",
|
|
76
|
+
displayName: "Max Angle X"
|
|
72
77
|
},
|
|
73
78
|
tiltMaxAngleY: {
|
|
74
79
|
type: "number",
|
|
75
|
-
|
|
76
|
-
description: "Maximum tilt angle in degrees on Y axis"
|
|
80
|
+
defaultValueHint: 20,
|
|
81
|
+
description: "Maximum tilt angle in degrees on Y axis",
|
|
82
|
+
displayName: "Max Angle Y"
|
|
77
83
|
},
|
|
78
84
|
tiltAxis: {
|
|
79
85
|
type: "choice",
|
|
80
86
|
options: ["x", "y"],
|
|
81
|
-
description: "Which axis should be enabled
|
|
87
|
+
description: "Which axis should be enabled",
|
|
88
|
+
defaultValueHint: "both",
|
|
89
|
+
displayName: "Axis"
|
|
82
90
|
},
|
|
83
91
|
glareEnable: {
|
|
84
92
|
type: "boolean",
|
|
85
|
-
|
|
86
|
-
description: "Enable glare effect"
|
|
93
|
+
defaultValueHint: false,
|
|
94
|
+
description: "Enable glare effect",
|
|
95
|
+
displayName: "Glare Enable"
|
|
87
96
|
},
|
|
88
97
|
glareMaxOpacity: {
|
|
89
98
|
type: "number",
|
|
90
|
-
|
|
91
|
-
description: "Maximum opacity of glare effect"
|
|
99
|
+
defaultValueHint: 0.7,
|
|
100
|
+
description: "Maximum opacity of glare effect",
|
|
101
|
+
displayName: "Glare Max Opacity",
|
|
102
|
+
hidden: function hidden(props) {
|
|
103
|
+
return !props.glareEnable;
|
|
104
|
+
}
|
|
92
105
|
},
|
|
93
106
|
glareColor: {
|
|
94
107
|
// TODO replace with color picker
|
|
95
108
|
type: "string",
|
|
96
|
-
|
|
97
|
-
description: "Color of glare effect"
|
|
109
|
+
defaultValueHint: "#ffffff",
|
|
110
|
+
description: "Color of glare effect",
|
|
111
|
+
displayName: "Glare Color",
|
|
112
|
+
hidden: function hidden(props) {
|
|
113
|
+
return !props.glareEnable;
|
|
114
|
+
}
|
|
98
115
|
},
|
|
99
116
|
glareBorderRadius: {
|
|
100
117
|
type: "string",
|
|
101
|
-
|
|
102
|
-
description: "Border radius of glare effect"
|
|
118
|
+
defaultValueHint: '0',
|
|
119
|
+
description: "Border radius of glare effect",
|
|
120
|
+
displayName: "Glare Border Radius",
|
|
121
|
+
hidden: function hidden(props) {
|
|
122
|
+
return !props.glareEnable;
|
|
123
|
+
}
|
|
103
124
|
},
|
|
104
125
|
glarePosition: {
|
|
105
126
|
type: "choice",
|
|
106
127
|
options: ["top", "bottom", "left", "right", "all"],
|
|
107
|
-
|
|
108
|
-
description: "Position of the glare effect"
|
|
128
|
+
defaultValueHint: 'bottom',
|
|
129
|
+
description: "Position of the glare effect",
|
|
130
|
+
displayName: "Glare Position",
|
|
131
|
+
hidden: function hidden(props) {
|
|
132
|
+
return !props.glareEnable;
|
|
133
|
+
}
|
|
109
134
|
},
|
|
110
135
|
glareReverse: {
|
|
111
136
|
type: "boolean",
|
|
112
|
-
|
|
113
|
-
description: "Reverse glare direction"
|
|
137
|
+
defaultValueHint: false,
|
|
138
|
+
description: "Reverse glare direction",
|
|
139
|
+
displayName: "Glare Reverse",
|
|
140
|
+
hidden: function hidden(props) {
|
|
141
|
+
return !props.glareEnable;
|
|
142
|
+
}
|
|
114
143
|
},
|
|
115
144
|
scale: {
|
|
116
145
|
type: "number",
|
|
117
|
-
|
|
118
|
-
description: "Scale of the element"
|
|
146
|
+
defaultValueHint: 1,
|
|
147
|
+
description: "Scale of the element",
|
|
148
|
+
displayName: "Scale"
|
|
119
149
|
},
|
|
120
150
|
perspective: {
|
|
121
151
|
type: "number",
|
|
122
|
-
|
|
123
|
-
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets."
|
|
152
|
+
defaultValueHint: 1000,
|
|
153
|
+
description: "The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.",
|
|
154
|
+
displayName: "Perspective"
|
|
124
155
|
},
|
|
125
156
|
flipVertically: {
|
|
126
157
|
type: "boolean",
|
|
127
|
-
|
|
128
|
-
description: "Flip the element vertically"
|
|
158
|
+
defaultValueHint: false,
|
|
159
|
+
description: "Flip the element vertically",
|
|
160
|
+
displayName: "Flip Vertically"
|
|
129
161
|
},
|
|
130
162
|
flipHorizontally: {
|
|
131
163
|
type: "boolean",
|
|
132
|
-
|
|
133
|
-
description: "Flip the element horizontally"
|
|
164
|
+
defaultValueHint: false,
|
|
165
|
+
description: "Flip the element horizontally",
|
|
166
|
+
displayName: "Flip Horizontally"
|
|
134
167
|
},
|
|
135
168
|
reset: {
|
|
136
169
|
type: "boolean",
|
|
137
|
-
|
|
138
|
-
description: "Reset the element to its original state"
|
|
170
|
+
defaultValueHint: false,
|
|
171
|
+
description: "Reset the element to its original state",
|
|
172
|
+
displayName: "Reset"
|
|
139
173
|
},
|
|
140
174
|
transitionEasing: {
|
|
141
175
|
type: "string",
|
|
142
|
-
|
|
143
|
-
description: "Easing function for the transition"
|
|
176
|
+
defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',
|
|
177
|
+
description: "Easing function for the transition",
|
|
178
|
+
displayName: "Transition Easing"
|
|
144
179
|
},
|
|
145
180
|
transitionSpeed: {
|
|
146
181
|
type: "number",
|
|
147
|
-
|
|
148
|
-
description: "Transition speed in milliseconds"
|
|
182
|
+
defaultValueHint: 400,
|
|
183
|
+
description: "Transition speed in milliseconds",
|
|
184
|
+
displayName: "Transition Speed"
|
|
149
185
|
},
|
|
150
186
|
trackOnWindow: {
|
|
151
187
|
type: "boolean",
|
|
152
|
-
|
|
153
|
-
description: "Track the mouse position on the whole window, not just on the element"
|
|
188
|
+
defaultValueHint: false,
|
|
189
|
+
description: "Track the mouse position on the whole window, not just on the element",
|
|
190
|
+
displayName: "Track On Window"
|
|
154
191
|
},
|
|
155
192
|
gyroscope: {
|
|
156
193
|
type: "boolean",
|
|
157
|
-
|
|
158
|
-
description: "Enable device orientation detection"
|
|
194
|
+
defaultValueHint: false,
|
|
195
|
+
description: "Enable device orientation detection",
|
|
196
|
+
displayName: "Gyroscope"
|
|
159
197
|
}
|
|
160
198
|
},
|
|
161
199
|
isDefaultExport: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-parallax-tilt.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n // defaultValueHint: true,\n description: \"Enable tilt effect\",\n },\n tiltReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse tilt direction\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n // defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n // defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description:\n \"Which axis should be enabled (unset means both are enabled)\",\n },\n glareEnable: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable glare effect\",\n },\n glareMaxOpacity: {\n type: \"number\",\n // defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n // defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n },\n glareBorderRadius: {\n type: \"string\",\n // defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n // defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n },\n glareReverse: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reverse glare direction\",\n },\n scale: {\n type: \"number\",\n // defaultValueHint: 1,\n description: \"Scale of the element\",\n },\n perspective: {\n type: \"number\",\n // defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n },\n flipVertically: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Flip the element horizontally\",\n },\n reset: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Reset the element to its original state\",\n },\n transitionEasing: {\n type: \"string\",\n // defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n },\n transitionSpeed: {\n type: \"number\",\n // defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n },\n trackOnWindow: {\n type: \"boolean\",\n // defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n },\n gyroscope: {\n type: \"boolean\",\n // defaultValueHint: false,\n description: \"Enable device orientation detection\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","registerTilt","loader","customTiltMeta","registerComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-parallax-tilt.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps } from \"react\";\nimport ReactParallaxTilt from \"react-parallax-tilt\";\n\nexport type TiltProps = ComponentProps<typeof ReactParallaxTilt>;\n\nexport default function Tilt(props: TiltProps) {\n return (\n <ReactParallaxTilt\n {...props}\n style={{\n transformStyle: \"preserve-3d\",\n ...(props.style ?? {}),\n }}\n ></ReactParallaxTilt>\n );\n}\n\nconst parallaxTiltMeta: ComponentMeta<TiltProps> = {\n name: \"hostless-parallax-tilt\",\n displayName: \"Tilt\",\n importName: \"Tilt\",\n importPath: \"@plasmicpkgs/react-parallax-tilt\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://placekitten.com/300/200\",\n style: {\n maxWidth: \"100%\",\n },\n },\n },\n tiltEnable: {\n type: \"boolean\",\n defaultValueHint: true,\n description: \"Enable tilt effect\",\n displayName: \"Enable\",\n },\n tiltReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse tilt direction\",\n displayName: \"Reverse\",\n },\n tiltAngleXInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on X axis\",\n displayName: \"Angle X Initial\",\n },\n tiltAngleYInitial: {\n type: \"number\",\n defaultValueHint: 0,\n description: \"Initial tilt angle in degrees on Y axis\",\n displayName: \"Angle Y Initial\",\n },\n tiltMaxAngleX: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on X axis\",\n displayName: \"Max Angle X\",\n },\n tiltMaxAngleY: {\n type: \"number\",\n defaultValueHint: 20,\n description: \"Maximum tilt angle in degrees on Y axis\",\n displayName: \"Max Angle Y\",\n },\n tiltAxis: {\n type: \"choice\",\n options: [\"x\", \"y\"],\n description: \"Which axis should be enabled\",\n defaultValueHint: \"both\",\n displayName: \"Axis\",\n },\n glareEnable: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable glare effect\",\n displayName: \"Glare Enable\",\n },\n glareMaxOpacity: {\n type: \"number\",\n defaultValueHint: 0.7,\n description: \"Maximum opacity of glare effect\",\n displayName: \"Glare Max Opacity\",\n hidden: (props) => !props.glareEnable,\n },\n glareColor: {\n // TODO replace with color picker\n type: \"string\",\n defaultValueHint: \"#ffffff\",\n description: \"Color of glare effect\",\n displayName: \"Glare Color\",\n hidden: (props) => !props.glareEnable,\n },\n glareBorderRadius: {\n type: \"string\",\n defaultValueHint: '0',\n description: \"Border radius of glare effect\",\n displayName: \"Glare Border Radius\",\n hidden: (props) => !props.glareEnable,\n },\n glarePosition: {\n type: \"choice\",\n options: [\"top\", \"bottom\", \"left\", \"right\", \"all\"],\n defaultValueHint: 'bottom',\n description: \"Position of the glare effect\",\n displayName: \"Glare Position\",\n hidden: (props) => !props.glareEnable,\n },\n glareReverse: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reverse glare direction\",\n displayName: \"Glare Reverse\",\n hidden: (props) => !props.glareEnable,\n },\n scale: {\n type: \"number\",\n defaultValueHint: 1,\n description: \"Scale of the element\",\n displayName: \"Scale\",\n },\n perspective: {\n type: \"number\",\n defaultValueHint: 1000,\n description:\n \"The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.\",\n displayName: \"Perspective\",\n },\n flipVertically: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element vertically\",\n displayName: \"Flip Vertically\",\n },\n flipHorizontally: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Flip the element horizontally\",\n displayName: \"Flip Horizontally\",\n },\n reset: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Reset the element to its original state\",\n displayName: \"Reset\",\n },\n transitionEasing: {\n type: \"string\",\n defaultValueHint: 'cubic-bezier(.03,.98,.52,.99)',\n description: \"Easing function for the transition\",\n displayName: \"Transition Easing\",\n },\n transitionSpeed: {\n type: \"number\",\n defaultValueHint: 400,\n description: \"Transition speed in milliseconds\",\n displayName: \"Transition Speed\",\n },\n trackOnWindow: {\n type: \"boolean\",\n defaultValueHint: false,\n description:\n \"Track the mouse position on the whole window, not just on the element\",\n displayName: \"Track On Window\",\n },\n gyroscope: {\n type: \"boolean\",\n defaultValueHint: false,\n description: \"Enable device orientation detection\",\n displayName: \"Gyroscope\",\n },\n },\n isDefaultExport: true,\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerTilt(\n loader?: { registerComponent: typeof registerComponent },\n customTiltMeta?: ComponentMeta<TiltProps>\n) {\n if (loader) {\n loader.registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n } else {\n registerComponent(Tilt, customTiltMeta ?? parallaxTiltMeta);\n }\n}\n"],"names":["Tilt","props","React","ReactParallaxTilt","style","transformStyle","parallaxTiltMeta","name","displayName","importName","importPath","children","type","defaultValue","src","maxWidth","tiltEnable","defaultValueHint","description","tiltReverse","tiltAngleXInitial","tiltAngleYInitial","tiltMaxAngleX","tiltMaxAngleY","tiltAxis","options","glareEnable","glareMaxOpacity","hidden","glareColor","glareBorderRadius","glarePosition","glareReverse","scale","perspective","flipVertically","flipHorizontally","reset","transitionEasing","transitionSpeed","trackOnWindow","gyroscope","isDefaultExport","defaultStyles","registerTilt","loader","customTiltMeta","registerComponent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-parallax-tilt",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Plasmic registration call for the HTML5 video element",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"typescript": "^3.9.7"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@plasmicapp/host": "^0.0.
|
|
39
|
+
"@plasmicapp/host": "^0.0.44",
|
|
40
40
|
"react-parallax-tilt": "^1.5.74"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|