Building a Cool Front End Thing Generator

Creating a tool to generate impressive front-end effects is a fantastic way to learn, hone your skills, and potentially gain recognition, regardless of your front-end experience level. Many popular online generators exist, such as Sarah Drasner's Hero Generator and CSS Grid Generator, Themesburg's Glassmorphism CSS Generator, and Components AI's extensive collection, including their Text Shadows generator.

This article demonstrates building an Animated Background Gradient Generator.

Project Setup with Next.js

This project utilizes Next.js for its ease of use. Begin by creating a new Next.js app:

npx create-next-app animated-gradient-background-generator

Modify pages/index.js to serve as the application's shell:

import Head from "next/head";
import { SettingsProvider } from "../context/SettingsContext";
import Controls from "../components/Controls";
import Output from "../components/Output";

export default function Home() {
  return (
    
      
        <title>Animated CSS Gradient Background Generator</title>
        <meta content="A tool for creating animated background gradients in pure CSS." name="description">
        <link href="/favicon.ico" rel="icon">
      
      <settingsprovider>
        <main style="{{" padding: textalign:>
          <h1 id="Animated-CSS-Gradient-Background-Generator">Animated CSS Gradient Background Generator</h1>
          <controls></controls>
          <output></output>
        </main>
      </settingsprovider>
    >
  );
}

Animated Gradients in CSS

The foundation for the generator is based on an example by Manuel Pinto, featuring animated CSS gradient backgrounds. The core CSS is:

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

React Components for Gradient Generation

The generator will allow users to configure:

• An array of gradient colors
• Gradient angle
• Animation speed

The context/SettingsContext.js file manages these settings using a higher-order component and default values:

import React, { useState, createContext } from "react";

const SettingsContext = createContext({ colorSelection: [] });

const SettingsProvider = ({ children }) => {
  const [colorSelection, setColorSelection] = useState([
    "deepskyblue",
    "darkviolet",
    "blue",
  ]);
  const [angle, setAngle] = useState(300);
  const [speed, setSpeed] = useState(5);

  return (
    <settingscontext.provider value="{{" colorselection setcolorselection angle setangle speed setspeed>
      {children}
    </settingscontext.provider>
  );
};

export { SettingsContext, SettingsProvider };

The application will consist of:

• Controls: Adjusts settings.
• AnimatedBackground: Displays the generated gradient.
• Output: Shows the generated CSS code.

The components/Controls.js file (partially shown, full implementation requires Colors.js and AddColor.js components detailed below):

import React from "react";
import Colors from "./Colors";
import AddColor from "./AddColor";
import AngleRange from "./AngleRange";
import SpeedRange from "./SpeedRange";
import Random from "./Random";


const Controls = (props) => (
  <div>
    <colors></colors>
    <addcolor></addcolor>
    <anglerange></anglerange>
    <speedrange></speedrange>
    <random></random>
  </div>
);

export default Controls;

The components/Colors.js component (handling color selection and deletion):

import React, { useContext } from "react";
import { SettingsContext } from "../context/SettingsContext";

const Colors = () => {
  const { colorSelection, setColorSelection } = useContext(SettingsContext);

  const onDelete = (deleteColor) => {
    setColorSelection(colorSelection.filter((color) => color !== deleteColor));
  };

  return (
    <div>
      {colorSelection.map((color) => (
        <div key="{color}" style="{{" display: width: height: marginright: marginbottom: background: color borderradius: position:>
          <button onclick="{()"> onDelete(color)}
            style={{
              background: "crimson",
              color: "white",
              borderRadius: "50%",
              position: "absolute",
              top: "-8px",
              right: "-8px",
              border: "none",
              fontSize: "18px",
              lineHeight: 1,
              width: "24px",
              height: "24px",
              cursor: "pointer",
            }}
          >
            ×
          </button>
        </div>
      ))}
    </div>
  );
};

export default Colors;

The components/AddColor.js component (using react-color for color picking):

// ... (import statements)

const AddColor = () => {
  const [displayPicker, setDisplayPicker] = useState(false);
  const { colorSelection, setColorSelection } = useContext(SettingsContext);

  const handleColorChange = (color) => {
    setColorSelection([...colorSelection, color.hex]);
    setDisplayPicker(false);
  };

  return (
    <div>
      <button onclick="{()"> setDisplayPicker(!displayPicker)}>
        Add Color
      </button>
      {displayPicker && (
        <chromepicker color="#fff" onchangecomplete="{handleColorChange}"></chromepicker>
      )}
    </div>
  );
};

export default AddColor;

The components/AngleRange.js and components/SpeedRange.js components (handling angle and speed adjustments):

// AngleRange.js
import React, { useContext } from "react";
import { SettingsContext } from "../context/SettingsContext";

const AngleRange = () => {
  const { angle, setAngle } = useContext(SettingsContext);

  return (
    <div style="{{" marginbottom:>
      <label htmlfor="angle">Angle:</label>
      <input type="range" id="angle" min="0" max="360" value="{angle}" onchange="{(e)"> setAngle(parseInt(e.target.value, 10))}
      />
      <span>{angle} degrees</span>
    </div>
  );
};

export default AngleRange;

// SpeedRange.js (similar structure, using setSpeed instead of setAngle)

The components/Random.js component (for generating random settings):

import React, { useContext } from "react";
import { SettingsContext } from "../context/SettingsContext";

const Random = () => {
  const { setColorSelection, setAngle, setSpeed } = useContext(SettingsContext);

  const generateRandomColor = () => {
    return "#"   Math.floor(Math.random() * 16777215).toString(16);
  };

  const generateRandomSettings = () => {
    const numColors = 3   Math.floor(Math.random() * 3);
    const colors = Array.from({ length: numColors }, generateRandomColor);
    setColorSelection(colors);
    setAngle(Math.floor(Math.random() * 360));
    setSpeed(Math.floor(Math.random() * 10)   1);
  };

  return (
    <button onclick="{generateRandomSettings}">Generate Random Settings</button>
  );
};

export default Random;

The components/AnimatedBackground.js component (applies the generated styles):

import React, { useContext } from "react";
import { SettingsContext } from "../context/SettingsContext";

const AnimatedBackground = ({ children }) => {
  const { colorSelection, speed, angle } = useContext(SettingsContext);

  const background = `linear-gradient(${angle}deg, ${colorSelection.join(
    ", "
  )})`;
  const backgroundSize = `${colorSelection.length * 60}% ${
    colorSelection.length * 60
  }%`;
  const animation = `gradient-animation ${
    colorSelection.length * Math.abs(speed - 11)
  }s ease infinite`;

  return (
    <div style="{{" background backgroundsize animation minheight:>
      {children}
    </div>
  );
};

export default AnimatedBackground;

The components/Output.js component (displays and allows copying the generated CSS):

import React, { useContext, useState } from "react";
import { SettingsContext } from "../context/SettingsContext";

const Output = () => {
  const [copied, setCopied] = useState(false);
  const { colorSelection, speed, angle } = useContext(SettingsContext);

  const generateCSS = () => {
    const background = `linear-gradient(${angle}deg, ${colorSelection.join(
      ", "
    )})`;
    const backgroundSize = `${colorSelection.length * 60}% ${
      colorSelection.length * 60
    }%`;
    const animation = `gradient-animation ${
      colorSelection.length * Math.abs(speed - 11)
    }s ease infinite`;

    return `
      .gradient-background {
        background: ${background};
        background-size: ${backgroundSize};
        animation: ${animation};
      }

      @keyframes gradient-animation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
    `;
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(generateCSS());
    setCopied(true);
    setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
  };

  return (
    <div style="{{" margintop:>
      <pre class="brush:php;toolbar:false">{generateCSS()}

{copied ? "Copied!" : "Copy CSS"}

); }; export default Output;

Remember to add the gradient-animation keyframes to your global CSS (e.g., styles/globals.css). Finally, wrap your main content within the AnimatedBackground component in pages/index.js. Don't forget to install react-color: npm install react-color. This detailed breakdown provides a more robust and user-friendly generator. Remember to adjust styling as needed for optimal presentation.

The above is the detailed content of Building a Cool Front End Thing Generator. For more information, please follow other related articles on the PHP Chinese website!