Skip to content

Commit 3a35417

Browse files
author
deploy
committed
Updated
1 parent 109b451 commit 3a35417

File tree

106 files changed

+45309
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+45309
-0
lines changed

‎[email protected]/FramerShaderGradient.mjs

+374
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
import {
2+
ShaderGradientCanvas
3+
} from "./chunk-CWHPURPD.mjs";
4+
import "./chunk-35NIH65G.mjs";
5+
import {
6+
ShaderGradient
7+
} from "./chunk-6GMBAIZ4.mjs";
8+
import "./chunk-BKMGN7IO.mjs";
9+
import "./chunk-WGOL3MLC.mjs";
10+
import "./chunk-5TNITGB6.mjs";
11+
import "./chunk-2S3VJM34.mjs";
12+
import "./chunk-FZIV7POA.mjs";
13+
import "./chunk-IRMTC4UN.mjs";
14+
import "./chunk-YUIDVF63.mjs";
15+
import "./chunk-4Z3JUAHA.mjs";
16+
import "./chunk-USQFKVUW.mjs";
17+
import "./chunk-XLXOMSVB.mjs";
18+
import "./chunk-N6TUE7XZ.mjs";
19+
import "./chunk-3U6A2N6D.mjs";
20+
import "./chunk-O7SDERYP.mjs";
21+
import "./chunk-KD5UHE3V.mjs";
22+
import "./chunk-4NRCS6EB.mjs";
23+
import "./chunk-X2NOPSAQ.mjs";
24+
import "./chunk-4MKFODLT.mjs";
25+
import "./chunk-F5B5J54Z.mjs";
26+
import "./chunk-YBH3ZCKF.mjs";
27+
import "./chunk-EQTKUIXJ.mjs";
28+
import "./chunk-2S5ZDPTV.mjs";
29+
import "./chunk-UIVFRJXT.mjs";
30+
import "./chunk-ZHIRR2QJ.mjs";
31+
import "./chunk-WMVG427C.mjs";
32+
import "./chunk-WBM42ICI.mjs";
33+
import "./chunk-OH6HADGN.mjs";
34+
import "./chunk-AVODCFKL.mjs";
35+
import "./chunk-DA2VURNJ.mjs";
36+
import "./chunk-KO4ISVNC.mjs";
37+
import "./chunk-G7COPUKV.mjs";
38+
import "./chunk-BI5IV7LU.mjs";
39+
import "./chunk-WS7WB67W.mjs";
40+
import "./chunk-Z4XR7UL5.mjs";
41+
import "./chunk-SX7QUDKQ.mjs";
42+
import "./chunk-VTSZNOAZ.mjs";
43+
import {
44+
__objRest,
45+
__spreadValues
46+
} from "./chunk-5BEQP2BQ.mjs";
47+
48+
// src/FramerShaderGradient.tsx
49+
import { ControlType } from "framer";
50+
import { jsx } from "react/jsx-runtime";
51+
function FramerShaderGradient(_a) {
52+
var _b = _a, {
53+
position,
54+
rotation,
55+
cameraAngle,
56+
noise
57+
} = _b, rest = __objRest(_b, [
58+
"position",
59+
"rotation",
60+
"cameraAngle",
61+
"noise"
62+
]);
63+
const { positionX, positionY, positionZ } = position;
64+
const { rotationX, rotationY, rotationZ } = rotation;
65+
const { cAzimuthAngle, cPolarAngle } = cameraAngle;
66+
const { uDensity, uStrength } = noise;
67+
return /* @__PURE__ */ jsx(
68+
ShaderGradient,
69+
__spreadValues({
70+
positionX,
71+
positionY,
72+
positionZ,
73+
rotationX,
74+
rotationY,
75+
rotationZ,
76+
cAzimuthAngle,
77+
cPolarAngle,
78+
uDensity,
79+
uStrength
80+
}, rest)
81+
);
82+
}
83+
FramerShaderGradient.propertyControls = {
84+
control: {
85+
type: ControlType.Enum,
86+
options: ["props", "query"],
87+
optionTitles: ["Props", "Query"],
88+
displaySegmentedControl: true
89+
},
90+
activeTab: {
91+
title: "Settings Group",
92+
type: ControlType.Enum,
93+
options: ["Shape", "Colors", "Effects", "View"],
94+
hidden: (props) => props.control === "query"
95+
},
96+
// Shape
97+
type: {
98+
type: ControlType.Enum,
99+
options: ["plane", "sphere", "waterPlane"],
100+
optionTitles: ["Plane", "Sphere", "Water"],
101+
displaySegmentedControl: true,
102+
hidden: (props) => props.control === "query" || props.activeTab !== "Shape"
103+
},
104+
shader: {
105+
type: ControlType.Enum,
106+
options: ["defaults", "positionMix"],
107+
optionTitles: ["Type A", "Type B"],
108+
displaySegmentedControl: true,
109+
hidden: (props) => props.control === "query" || props.activeTab !== "Shape"
110+
},
111+
animate: {
112+
type: ControlType.Enum,
113+
options: ["on", "off"],
114+
optionTitles: ["On", "Off"],
115+
displaySegmentedControl: true,
116+
hidden: (props) => props.control === "query" || props.activeTab !== "Shape" && props.activeTab !== "URL"
117+
},
118+
uTime: {
119+
title: "Movements",
120+
type: ControlType.Number,
121+
step: 0.1,
122+
displayStepper: true,
123+
hidden: (props) => props.animate === "on" || props.control === "query" || props.activeTab !== "Shape"
124+
},
125+
uSpeed: {
126+
title: "Speed",
127+
type: ControlType.Number,
128+
step: 0.1,
129+
min: 0.1,
130+
displayStepper: true,
131+
defaultValue: 0.4,
132+
hidden: (props) => props.animate === "off" || props.control === "query" || props.activeTab !== "Shape"
133+
},
134+
noise: {
135+
type: ControlType.Object,
136+
controls: {
137+
uStrength: {
138+
type: ControlType.Number,
139+
title: "Strength",
140+
step: 0.1,
141+
min: 0.1,
142+
displayStepper: true,
143+
defaultValue: 4
144+
},
145+
uDensity: {
146+
type: ControlType.Number,
147+
title: "Density",
148+
step: 0.1,
149+
min: 0.1,
150+
displayStepper: true,
151+
defaultValue: 1.3
152+
}
153+
// uFrequency: {
154+
// type: ControlType.Number,
155+
// step: 0.1,
156+
// min: 0.1,
157+
// displayStepper: true,
158+
// hidden: (props) =>
159+
// props.type !== "sphere" ||
160+
// props.control === "query" ||
161+
// props.activeTab !== "Shape",
162+
// },
163+
},
164+
hidden: (props) => props.control === "query" || props.activeTab !== "Shape"
165+
},
166+
uAmplitude: {
167+
type: ControlType.Number,
168+
title: "Spiral",
169+
step: 0.1,
170+
min: 0.1,
171+
displayStepper: true,
172+
defaultValue: 1,
173+
hidden: (props) => props.type !== "sphere" || props.control === "query" || props.activeTab !== "Shape"
174+
},
175+
pixelDensity: {
176+
type: ControlType.Number,
177+
step: 0.1,
178+
min: 0,
179+
max: 3,
180+
displayStepper: true,
181+
defaultValue: 1,
182+
hidden: (props) => props.control === "query" || props.activeTab !== "Shape"
183+
},
184+
// Effects
185+
grain: {
186+
type: ControlType.Enum,
187+
options: ["on", "off"],
188+
optionTitles: ["On", "Off"],
189+
displaySegmentedControl: true,
190+
hidden: (props) => props.control === "query" || props.activeTab !== "Effects"
191+
},
192+
lightType: {
193+
type: ControlType.Enum,
194+
options: ["env", "3d"],
195+
optionTitles: ["Env", "Light"],
196+
displaySegmentedControl: true,
197+
defaultValue: "3d",
198+
hidden: (props) => props.control === "query" || props.activeTab !== "Effects"
199+
},
200+
envPreset: {
201+
type: ControlType.Enum,
202+
options: ["city", "dawn", "lobby"],
203+
optionTitles: ["City", "Dawn", "Lobby"],
204+
displaySegmentedControl: true,
205+
hidden: (props) => props.lightType === "3d" || props.control === "query" || props.activeTab !== "Effects"
206+
},
207+
brightness: {
208+
type: ControlType.Number,
209+
step: 0.1,
210+
min: 0.1,
211+
max: 3,
212+
defaultValue: 1.2,
213+
hidden: (props) => props.lightType === "env" || props.control === "query" || props.activeTab !== "Effects" || props.url
214+
},
215+
reflection: {
216+
type: ControlType.Number,
217+
step: 0.1,
218+
min: 0,
219+
max: 1,
220+
defaultValue: 0.1,
221+
hidden: (props) => props.lightType === "3d" || props.control === "query" || props.activeTab !== "Effects" || props.url
222+
},
223+
// Colors
224+
color1: {
225+
type: ControlType.Color,
226+
defaultValue: "#ff5005",
227+
hidden: (props) => props.control === "query" || props.activeTab !== "Colors"
228+
},
229+
color2: {
230+
type: ControlType.Color,
231+
defaultValue: "#dbba95",
232+
hidden: (props) => props.control === "query" || props.activeTab !== "Colors"
233+
},
234+
color3: {
235+
type: ControlType.Color,
236+
defaultValue: "#d0bce1",
237+
hidden: (props) => props.control === "query" || props.activeTab !== "Colors"
238+
},
239+
// View
240+
cDistance: {
241+
title: "Distance",
242+
type: ControlType.Number,
243+
displayStepper: true,
244+
min: 0,
245+
max: 20,
246+
defaultValue: 3.6,
247+
hidden: (props) => props.type === "sphere" || props.control === "query" || props.activeTab !== "View"
248+
},
249+
cameraZoom: {
250+
type: ControlType.Number,
251+
displayStepper: true,
252+
step: 0.1,
253+
min: 0.1,
254+
max: 30,
255+
defaultValue: 1,
256+
hidden: (props) => props.type !== "sphere" || props.control === "query" || props.activeTab !== "View"
257+
},
258+
cameraAngle: {
259+
type: ControlType.Object,
260+
controls: {
261+
cAzimuthAngle: {
262+
title: "Azimuth",
263+
type: ControlType.Number,
264+
displayStepper: true,
265+
step: 10,
266+
min: 0,
267+
max: 360,
268+
defaultValue: 180
269+
},
270+
cPolarAngle: {
271+
title: "Polar",
272+
type: ControlType.Number,
273+
displayStepper: true,
274+
step: 10,
275+
min: 0,
276+
max: 180,
277+
defaultValue: 90
278+
}
279+
},
280+
hidden: (props) => props.control === "query" || props.activeTab !== "View"
281+
},
282+
position: {
283+
type: ControlType.Object,
284+
controls: {
285+
positionX: {
286+
type: ControlType.Number,
287+
step: 0.1,
288+
displayStepper: true,
289+
defaultValue: -1.4
290+
},
291+
positionY: {
292+
type: ControlType.Number,
293+
step: 0.1,
294+
displayStepper: true,
295+
defaultValue: 0
296+
},
297+
positionZ: {
298+
type: ControlType.Number,
299+
step: 0.1,
300+
displayStepper: true,
301+
defaultValue: 0
302+
}
303+
},
304+
hidden: (props) => props.control === "query" || props.activeTab !== "View"
305+
},
306+
rotation: {
307+
type: ControlType.Object,
308+
controls: {
309+
rotationX: {
310+
type: ControlType.Number,
311+
step: 10,
312+
min: -360,
313+
max: 360,
314+
displayStepper: true,
315+
defaultValue: 0
316+
},
317+
rotationY: {
318+
type: ControlType.Number,
319+
step: 10,
320+
min: -360,
321+
max: 360,
322+
displayStepper: true,
323+
defaultValue: 10
324+
},
325+
rotationZ: {
326+
type: ControlType.Number,
327+
step: 10,
328+
min: -360,
329+
max: 360,
330+
displayStepper: true,
331+
defaultValue: 50
332+
}
333+
},
334+
hidden: (props) => props.control === "query" || props.activeTab !== "View"
335+
},
336+
// urlString
337+
urlString: {
338+
type: ControlType.String,
339+
placeholder: "URL from shadergradient.co",
340+
defaultValue: "https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.2&cAzimuthAngle=180&cDistance=3.6&cPolarAngle=90&cameraZoom=1&color1=%23ff5005&color2=%23dbba95&color3=%23d0bce1&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&gizmoHelper=hide&grain=on&lightType=3d&pixelDensity=1&positionX=-1.4&positionY=0&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0.1&rotationX=0&rotationY=10&rotationZ=50&shader=defaults&type=plane&uDensity=1.3&uFrequency=5.5&uSpeed=0.4&uStrength=4&uTime=0&wireframe=false",
341+
hidden: (props) => props.control === "props"
342+
},
343+
// Tools (🧰)
344+
zoomOut: {
345+
type: ControlType.Boolean,
346+
title: "View",
347+
enabledTitle: "Wide",
348+
disabledTitle: "-",
349+
hidden: (props) => props.control === "query"
350+
},
351+
toggleAxis: {
352+
type: ControlType.Boolean,
353+
title: "Axis",
354+
enabledTitle: "Guide",
355+
disabledTitle: "-",
356+
hidden: (props) => props.control === "query"
357+
},
358+
pointerEvents: {
359+
type: ControlType.Enum,
360+
title: "Touch Control",
361+
options: ["none", "auto"],
362+
optionTitles: ["Disable", "Enable"],
363+
displaySegmentedControl: true,
364+
hidden: (props) => props.control === "query"
365+
},
366+
performantOnCanvas: {
367+
type: ControlType.Boolean,
368+
defaultValue: false
369+
}
370+
};
371+
export {
372+
FramerShaderGradient,
373+
ShaderGradientCanvas
374+
};

‎[email protected]/ShaderGradient/Controls/CameraControl.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {
2+
CameraControl
3+
} from "../../chunk-DA2VURNJ.mjs";
4+
import "../../chunk-KO4ISVNC.mjs";
5+
import "../../chunk-G7COPUKV.mjs";
6+
import "../../chunk-BI5IV7LU.mjs";
7+
import "../../chunk-WS7WB67W.mjs";
8+
import "../../chunk-Z4XR7UL5.mjs";
9+
import "../../chunk-SX7QUDKQ.mjs";
10+
import "../../chunk-5BEQP2BQ.mjs";
11+
export {
12+
CameraControl
13+
};

0 commit comments

Comments
 (0)