From 2c0423667cf3c8fedb194c7b34b5edd5657628f4 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sat, 2 Aug 2025 16:09:20 +0200 Subject: [PATCH] feat: background gradients to project settings --- .../src/components/background-settings.tsx | 2 +- .../editor/media-panel/views/settings.tsx | 111 ++++++++++++++---- .../src/components/editor/preview-panel.tsx | 4 +- apps/web/src/data/colors/pattern-craft.ts | 30 +++++ .../src/data/{colors.ts => colors/solid.ts} | 0 apps/web/src/data/colors/syntax-ui.tsx | 32 +++++ 6 files changed, 152 insertions(+), 27 deletions(-) create mode 100644 apps/web/src/data/colors/pattern-craft.ts rename apps/web/src/data/{colors.ts => colors/solid.ts} (100%) create mode 100644 apps/web/src/data/colors/syntax-ui.tsx diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx index 7e27e574..0457cb05 100644 --- a/apps/web/src/components/background-settings.tsx +++ b/apps/web/src/components/background-settings.tsx @@ -3,7 +3,7 @@ import { Button } from "./ui/button"; import { BackgroundIcon } from "./icons"; import { cn } from "@/lib/utils"; import Image from "next/image"; -import { colors } from "@/data/colors"; +import { colors } from "@/data/colors/solid"; import { useProjectStore } from "@/stores/project-store"; import { PipetteIcon } from "lucide-react"; diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx index 8667b9d1..3bce1753 100644 --- a/apps/web/src/components/editor/media-panel/views/settings.tsx +++ b/apps/web/src/components/editor/media-panel/views/settings.tsx @@ -22,9 +22,11 @@ import { useEditorStore } from "@/stores/editor-store"; import { useAspectRatio } from "@/hooks/use-aspect-ratio"; import Image from "next/image"; import { cn } from "@/lib/utils"; -import { colors } from "@/data/colors"; +import { colors } from "@/data/colors/solid"; +import { patternCraftGradients } from "@/data/colors/pattern-craft"; import { PipetteIcon } from "lucide-react"; import { useMemo, memo, useCallback } from "react"; +import { syntaxUIGradients } from "@/data/colors/syntax-ui"; export function SettingsView() { return ; @@ -137,8 +139,8 @@ const BlurPreview = memo( }) => (
@@ -161,6 +163,57 @@ const BlurPreview = memo( BlurPreview.displayName = "BlurPreview"; +const BackgroundPreviews = memo( + ({ + backgrounds, + currentBackgroundColor, + isColorBackground, + handleColorSelect, + useBackgroundColor = false, + }: { + backgrounds: string[]; + currentBackgroundColor: string; + isColorBackground: boolean; + handleColorSelect: (bg: string) => void; + useBackgroundColor?: boolean; + }) => { + return useMemo( + () => + backgrounds.map((bg) => ( +
handleColorSelect(bg)} + /> + )), + [ + backgrounds, + isColorBackground, + currentBackgroundColor, + handleColorSelect, + useBackgroundColor, + ] + ); + } +); + +BackgroundPreviews.displayName = "BackgroundPreviews"; + function BackgroundView() { const { activeProject, updateBackgroundType } = useProjectStore(); @@ -205,36 +258,46 @@ function BackgroundView() { [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect] ); - const colorPreviews = useMemo( - () => - colors.map((color) => ( -
handleColorSelect(color)} - /> - )), - [isColorBackground, currentBackgroundColor, handleColorSelect] - ); - return (
- +
{blurPreviews}
 - +
- {colorPreviews} + +
+ + + +
+ +
+ + + +
+
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 3a962025..58cc5d5b 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -480,7 +480,7 @@ export function PreviewPanel() { style={{ width: previewDimensions.width, height: previewDimensions.height, - backgroundColor: + background: activeProject?.backgroundType === "blur" ? "transparent" : activeProject?.backgroundColor || "#000000", @@ -742,7 +742,7 @@ function FullscreenPreview({ style={{ width: previewDimensions.width, height: previewDimensions.height, - backgroundColor: + background: activeProject?.backgroundType === "blur" ? "#1a1a1a" : activeProject?.backgroundColor || "#1a1a1a", diff --git a/apps/web/src/data/colors/pattern-craft.ts b/apps/web/src/data/colors/pattern-craft.ts new file mode 100644 index 00000000..56c49b34 --- /dev/null +++ b/apps/web/src/data/colors/pattern-craft.ts @@ -0,0 +1,30 @@ +// These are the gradients from Pattern Craft (https://patterncraft.fun/) + +export const patternCraftGradients = [ + // Dreamy Sky Pink Glow + "radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%)", + + // Soft Warm Pastel Texture + "radial-gradient(circle at 20% 80%, rgba(255, 182, 153, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 214, 0.5) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 182, 153, 0.1) 0%, transparent 50%), #fff8f0", + + // Warm Soft Coral & Cream + "radial-gradient(circle at 20% 80%, rgba(255, 160, 146, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 228, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 160, 146, 0.15) 0%, transparent 50%), #fef9f7", + + // Soft Green Glow + "radial-gradient(circle at center, #8FFFB0, transparent), white", + + // Purple Glow Right + "radial-gradient(circle at top right, rgba(173, 109, 244, 0.5), transparent 70%)", + + // Teal Glow Right + "radial-gradient(circle at top right, rgba(56, 193, 182, 0.5), transparent 70%)", + + // Warm Orange Glow Right + "radial-gradient(circle at top right, rgba(255, 140, 60, 0.5), transparent 70%)", + + // Cool Blue Glow Right + "radial-gradient(circle at top right, rgba(70, 130, 180, 0.5), transparent 70%)", + + // Purple Glow Left + "radial-gradient(circle at top left, rgba(173, 109, 244, 0.5), transparent 70%)", +]; diff --git a/apps/web/src/data/colors.ts b/apps/web/src/data/colors/solid.ts similarity index 100% rename from apps/web/src/data/colors.ts rename to apps/web/src/data/colors/solid.ts diff --git a/apps/web/src/data/colors/syntax-ui.tsx b/apps/web/src/data/colors/syntax-ui.tsx new file mode 100644 index 00000000..6a7677b4 --- /dev/null +++ b/apps/web/src/data/colors/syntax-ui.tsx @@ -0,0 +1,32 @@ +// These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients) + +export const syntaxUIGradients = [ + // Cyan to Blue gradients + "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)", + "linear-gradient(to right, #bfdbfe, #a5f3fc)", + "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)", + + // Purple gradients + "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)", + "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)", + + // Blue gradients + "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)", + "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)", + + // Green gradients + "linear-gradient(to right, #6ee7b7, #34d399, #10b981)", + "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)", + + // Red gradient + "linear-gradient(to right, #fca5a5, #f87171, #ef4444)", + + // Yellow/Orange gradient + "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)", + + // Pink gradient + "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)", + + // Neon radial gradient + "radial-gradient(circle at bottom left, #ff00ff, #00ffff)", +];