Added install instructions

firecmsco · Feb 28, 2024 · cdf5ff1 · cdf5ff1
1 parent b40ab26
commit cdf5ff1
Show file tree

Hide file tree

Showing 14 changed files with 4,934 additions and 2,791 deletions.
diff --git a/README.md b/README.md
@@ -3,31 +3,31 @@
 Create awesome 3d gradients with this library based on three.js.
 
 Check the demo and gradients editor to find your perfect config here:
-[https://neat.camberi.com/](https://neat.camberi.com/)
+[https://neat.firecms.co/](https://neat.firecms.co/)
 
 Neat is released under the CC license, so you can use it for free in your
 projects,
 commercial or not. You can also modify it and redistribute it, but you must keep
 the license and the credits.
 
-If you want to remove the Camberi link, you can reach us at hello@camberi.com
+If you want to remove the Camberi link, you can reach us at hello@firecms.co
 
 ### Installation:
 
 ```
-yarn install @camberi/neat three.js
+yarn install @firecms/neat three.js
 ```
 
 or
 
 ```
-npm install @camberi/neat three.js
+npm install @firecms/neat three.js
 ```
 
 ### Usage:
 
 ```typescript
-import { NeatConfig, NeatGradient } from "@camberi/neat";
+import { NeatConfig, NeatGradient } from "@firecms/neat";
 
 // Define your config
 export const config: NeatConfig = {

diff --git a/editor/index.html b/editor/index.html
@@ -9,15 +9,15 @@
 
     <meta property="og:title" content="NEAT, beautiful 3D gradients for your website" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://neat.camberi.com" />
-    <meta property="og:image" content="https://neat.camberi.com/og_image.png" />
+    <meta property="og:url" content="https://neat.firecms.co" />
+    <meta property="og:image" content="https://neat.firecms.co/og_image.png" />
 
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@gatti675" />
     <meta name="twitter:creator" content="@gatti675" />
 
     <meta name="robots" content="index">
-    <link rel="canonical" href="https://neat.camberi.com" />
+    <link rel="canonical" href="https://neat.firecms.co" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/editor/package.json b/editor/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "@camberi/neat-editor",
+  "name": "@firecms/neat-editor",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@camberi/neat": "0.1.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@firecms/neat": "0.1.0",
     "@fontsource/roboto": "^4.5.8",
     "@fontsource/sofia-sans": "^4.5.0",
     "@mui/icons-material": "^5.10.6",
@@ -36,7 +36,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "deploy": "yarn build && firebase deploy --only=hosting"
+    "deploy": "yarn build && firebase deploy --only=hosting --project=neat-co"
   },
   "eslintConfig": {
     "extends": [

diff --git a/editor/src/components/CodeDialog.tsx b/editor/src/components/CodeDialog.tsx
@@ -1,13 +1,6 @@
-import {
-    Box,
-    Button,
-    Dialog, DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle, TextField
-} from "@mui/material";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
 import React from "react";
-import { NeatConfig } from "@camberi/neat";
+import { NeatConfig } from "@firecms/neat";
 
 export function CodeDialog({
                                open,
@@ -20,20 +13,16 @@ export function CodeDialog({
 
     return (
         <Dialog open={open} onClose={onClose}>
-            <DialogTitle>We are almost there!</DialogTitle>
+            <DialogTitle>That's a nice looking background!</DialogTitle>
             <DialogContent>
-                <DialogContentText>
-                    <p>Neat gradient is not ready yet.</p>
-                    <p>You can save the configuration you have created by saving
-                        the following
-                        snippet.
-                    </p>
-                    <p>If you think you have a great combination, feel free to share it with us by <a
-                        href="mailto:hello@camberi.com">email</a> or on our <a
-                        href="https://twitter.com/gatti675">Twitter account</a>
-                        and we will add it to the library.
-                    </p>
-                </DialogContentText>
+                <p>
+                    Install the package using npm or yarn, following the instructions in the <a
+                    target={"_blank"}
+                    href="https://www.npmjs.com/package/@firecms/neat">package page</a>.
+                </p>
+                <p>
+                    Use the following code to initialize your NeatGradient:
+                </p>
                 <Box component={"pre"}
                      sx={{
                          p: 2,
@@ -43,6 +32,11 @@ export function CodeDialog({
                      }}>
                     {JSON.stringify(config, null, 4)}
                 </Box>
+
+                <p>If you think you have a great combination, feel free to share it with us by <a
+                    href="mailto:hello@firecms.co">email</a> or on our <a
+                    href="https://twitter.com/gatti675">Twitter account</a> and we will add it to the library.
+                </p>
             </DialogContent>
             <DialogActions>
                 <Button onClick={onClose}>Close</Button>

diff --git a/editor/src/components/ColowSwatch.tsx b/editor/src/components/ColowSwatch.tsx
@@ -8,7 +8,7 @@ import {
 import Checkbox from '@mui/material/Checkbox';
 import React from 'react'
 import { ChromePicker, ColorResult } from "react-color";
-import { NeatColor } from "@camberi/neat";
+import { NeatColor } from "@firecms/neat";
 
 export function ColorSwatch({
                                 color,

diff --git a/editor/src/components/NeatEditor.tsx b/editor/src/components/NeatEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 
-import { NeatColor, NeatConfig, NeatGradient } from "@camberi/neat";
+import { NeatColor, NeatConfig, NeatGradient } from "@firecms/neat";
 
 import "@fontsource/sofia-sans";
 
@@ -9,13 +9,7 @@ import "@fontsource/sofia-sans";
 // import '@fontsource/sofia/500.css';
 // import '@fontsource/sofia/700.css';
 // import '@fontsource/sofia/900.css';
-import {
-    Box,
-    FormControlLabel,
-    Button,
-    Slider,
-    Typography
-} from "@mui/material";
+import { Box, Button, FormControlLabel, Slider, Tooltip, Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import Drawer from "@mui/material/Drawer";
@@ -58,12 +52,14 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
         if (config.verticalPressure !== undefined) setVerticalPressure(config.verticalPressure);
         if (config.shadows !== undefined) setShadows(config.shadows);
         if (config.highlights !== undefined) setHighlights(config.highlights);
-        if (config.saturation !== undefined) setSaturation(config.saturation);
+        if (config.colorSaturation !== undefined) setSaturation(config.colorSaturation);
+        if (config.colorBrightness !== undefined) setBrightness(config.colorBrightness);
         if (config.waveFrequencyX !== undefined) setWaveFrequencyX(config.waveFrequencyX);
         if (config.waveFrequencyY !== undefined) setWaveFrequencyY(config.waveFrequencyY);
         if (config.waveAmplitude !== undefined) setWaveAmplitude(config.waveAmplitude);
         if (config.backgroundAlpha !== undefined) setBackgroundAlpha(config.backgroundAlpha);
         if (config.backgroundColor !== undefined) setBackgroundColor(config.backgroundColor);
+        if (config.resolution !== undefined) setResolution(config.resolution);
     }
 
     const scrollRef = useRef<number>(0);
@@ -80,12 +76,14 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
 
     const [shadows, setShadows] = React.useState<number>(defaultConfig.shadows);
     const [highlights, setHighlights] = React.useState<number>(defaultConfig.highlights);
-    const [saturation, setSaturation] = React.useState<number>(defaultConfig.saturation);
+    const [saturation, setSaturation] = React.useState<number>(defaultConfig.colorSaturation);
+    const [brightness, setBrightness] = React.useState<number>(defaultConfig.colorBrightness);
 
     const [waveFrequencyX, setWaveFrequencyX] = React.useState<number>(defaultConfig.waveFrequencyX);
     const [waveFrequencyY, setWaveFrequencyY] = React.useState<number>(defaultConfig.waveFrequencyY);
     const [waveAmplitude, setWaveAmplitude] = React.useState<number>(defaultConfig.waveAmplitude);
 
+    const [resolution, setResolution] = React.useState<number>(defaultConfig.resolution);
     const [backgroundAlpha, setBackgroundAlpha] = React.useState<number>(defaultConfig.backgroundAlpha);
     const [backgroundColor, setBackgroundColor] = React.useState<string>(defaultConfig.backgroundColor);
 
@@ -130,7 +128,9 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
             colorBlending,
             shadows,
             highlights,
-            saturation
+            colorSaturation: saturation,
+            colorBrightness: brightness,
+            resolution
         });
 
         return gradientRef.current.destroy;
@@ -161,14 +161,15 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
             gradientRef.current.waveAmplitude = waveAmplitude;
             gradientRef.current.shadows = shadows;
             gradientRef.current.highlights = highlights;
-            gradientRef.current.saturation = saturation;
+            gradientRef.current.colorSaturation = saturation;
+            gradientRef.current.colorBrightness = brightness;
             gradientRef.current.wireframe = wireframe;
             gradientRef.current.colorBlending = colorBlending;
             gradientRef.current.backgroundColor = backgroundColor;
             gradientRef.current.backgroundAlpha = backgroundAlpha;
-
+            gradientRef.current.resolution = resolution;
         }
-    }, [speed, horizontalPressure, verticalPressure, waveFrequencyX, waveFrequencyY, waveAmplitude, colors, shadows, highlights, saturation, wireframe, colorBlending, backgroundColor, backgroundAlpha]);
+    }, [speed, horizontalPressure, verticalPressure, waveFrequencyX, waveFrequencyY, waveAmplitude, colors, shadows, highlights, saturation, brightness, wireframe, colorBlending, resolution, backgroundColor, backgroundAlpha]);
 
     const config: NeatConfig = {
         colors,
@@ -180,11 +181,13 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
         waveAmplitude,
         shadows,
         highlights,
-        saturation,
+        colorBrightness: brightness,
+        colorSaturation: saturation,
         wireframe,
         colorBlending,
         backgroundColor,
-        backgroundAlpha
+        backgroundAlpha,
+        resolution
     }
 
     return (
@@ -423,7 +426,6 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
 
                         </ExpandablePanel>
 
-
                         <ExpandablePanel
                             Title={
                                 <Typography variant={"button"}>
@@ -592,6 +594,31 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                                     }}
                                 />
                             </Box>
+                            <Box sx={{
+                                display: "flex",
+                                flexDirection: "row",
+                                gap: 1,
+                                alignItems: "flex-end"
+                            }}>
+                                <Typography gutterBottom
+                                            variant={"caption"}
+                                            sx={{
+                                                width: 100,
+                                                textAlign: "right",
+                                                pr: 1
+                                            }}>Brightness</Typography>
+                                <Slider
+                                    valueLabelDisplay="auto"
+                                    value={brightness}
+                                    size={"small"}
+                                    step={.05}
+                                    min={0}
+                                    max={10}
+                                    onChange={(event, newValue) => {
+                                        setBrightness(newValue as number)
+                                    }}
+                                />
+                            </Box>
 
                         </ExpandablePanel>
 
@@ -602,6 +629,34 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                                 </Typography>
                             }>
 
+                            <Tooltip title={"The density of triangles in the 3d mesh. Reduce to increase performance"}>
+                                <Box sx={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    gap: 1,
+                                    alignItems: "flex-end"
+                                }}>
+                                    <Typography gutterBottom
+                                                variant={"caption"}
+                                                sx={{
+                                                    width: 100,
+                                                    textAlign: "right",
+                                                    pr: 1
+                                                }}>Resolution</Typography>
+                                    <Slider
+                                        valueLabelDisplay="auto"
+                                        value={resolution}
+                                        size={"small"}
+                                        step={.05}
+                                        min={.05}
+                                        max={2}
+                                        onChange={(event, newValue) => {
+                                            setResolution(newValue as number)
+                                        }}
+                                    />
+                                </Box>
+                            </Tooltip>
+
 
                             <Box sx={{
                                 display: "flex",
@@ -748,7 +803,8 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
 
                         <Button variant="contained"
                                 sx={{ mt: 3 }}
-                                onClick={handleDrawerOpen}>Edit this gradient</Button>
+                                onClick={handleDrawerOpen}>EDIT THIS GRADIENT</Button>
+
                         <Box sx={{
                             width: "380px",
                             p: 2,
@@ -757,17 +813,36 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                             zIndex: 1,
                         }}>
                             <Box component={"p"}
-                                 sx={{ mt: 4 }}>
+                                 sx={{
+                                     mt: 4,
+                                     fontSize: "20px"
+                                 }}>
                                 Neat is a free tool that generates beautiful
                                 gradient
                                 animations for your website.
                                 It's easy to use and offers a wide range of
                                 customization options.
                             </Box>
 
+                            <Box component={"p"}
+                                 sx={{
+                                     mt: 4,
+                                     fontSize: "20px"
+                                 }}>
+                                Install the package using npm or yarn, following the instructions in the <a
+                                target={"_blank"}
+                                href="https://github.com/FireCMSco/neat">GitHub page</a> and please leave a star ⭐.
+                            </Box>
+
+                            <Button variant="outlined"
+                                    component={"a"}
+                                    target={"_blank"}
+                                    href="https://github.com/FireCMSco/neat"
+                                    sx={{ mt: 3 }}>GET STARTED</Button>
+
                             <Box component={"p"}>
                                 Built with ❤️ by <a rel={"noopener"}
-                                                    href={"https://camberi.com"}>Camberi</a>
+                                                    href={"https://firecms.co"}>FireCMS</a>
                             </Box>
                         </Box>
                     </Box>
@@ -790,7 +865,7 @@ export default function NeatEditor({ analytics }: NeatEditorProps) {
                 {/*    </Box>*/}
 
                 {/*    <Box component={"p"}>*/}
-                {/*        Built with ❤️by <a rel={"noopener"} href={"https://camberi.com"}>Camberi</a>*/}
+                {/*        Built with ❤️by <a rel={"noopener"} href={"https://firecms.co"}>Camberi</a>*/}
                 {/*    </Box>*/}
 
                 {/*</Box>*/}