top of page
Spectrum Supreme logo.png

Spectrum Supreme

A gradient creatation app for Canva

​

Spectrum Supreme Canva Edition is a powerful, feature-rich gradient generation application designed specifically for seamless integration with Canva's creative ecosystem. This advanced tool empowers designers, content creators, and visual artists to create stunning, complex gradients with sophisticated visual effects that were previously impossible within Canva's native environment.

Built on a robust React-based architecture with real-time canvas rendering, Spectrum Supreme delivers professional-grade gradient creation capabilities directly within your Canva workflow. Whether you're designing social media graphics, presentations, marketing materials, or artistic compositions, this tool provides the precision and creative freedom to bring your vision to life.

​

Intro and tutorial video for Spectrum Supreme

Directory

​


Key Features
 

​Universal Features Across All Gradients

​

Interactive Color Management:

  • Draggable Hotspots: Click and drag color stops directly on the preview canvas

  • Real-time Updates: All changes reflect immediately in the preview

  • Double-click to Add: Create new color stops by double-clicking on the preview

  • Precision Editing: Use sliders for exact numerical control​

image.png
image.png

Linear Gradients

Perfect for classic directional color transitions and backgrounds. Linear gradients create smooth color flows in straight lines across your canvas.

​

Available Controls:

  • Move Selected (0-100%): Position individual color stops along the gradient line

  • Center X (0-100%): Horizontal positioning of the gradient center point

  • Center Y (0-100%): Vertical positioning of the gradient center point

  • Scale (10-300%): Resize the gradient from 10% to 300% of original size

  • Rotation (0-360°): Rotate the gradient direction in degrees

  • Banding (0-100%): Create posterized, stepped color transitions for artistic effects

  • Effect Mode: Choose from None, Mirror (symmetrical reflections), or Kaleidoscope patterns

 

Advanced Effect Options:

  • Mirror Effect: Creates symmetrical reflections of your gradient

  • Kaleidoscope Effect: Generates complex geometric patterns with adjustable segments (3-12), scale (50-200%), and rotation (0-360°)

Radial Gradients

Create stunning circular color transitions radiating from a central point. Perfect for spotlight effects, backgrounds, and focal elements.

 

Available Controls:

  • Move Selected (0-100%): Adjust individual color stop positions along the radius

  • Center X (0-100%): Move the radial center horizontally across the canvas

  • Center Y (0-100%): Move the radial center vertically across the canvas

  • Scale (10-300%): Control the overall size of the radial gradient

  • Rotation (0-360°): Rotate the entire radial pattern

  • Banding (0-100%): Apply posterization effects for stepped color transitions

  • Effect Mode: Apply Mirror or Kaleidoscope transformations

 

Professional Applications:

  • Spotlight and vignette effects

  • Circular backgrounds and badges

  • Focus drawing and attention elements

image.png

Conic Gradients

Generate cone-shaped color transitions perfect for color wheels, progress indicators, and dynamic circular designs.

 

Available Controls:

  • Rotate Selection (0-360°): Precisely position selected color stops around the circle in degrees

  • Center X (0-100%): Horizontal positioning of the cone center

  • Center Y (0-100%): Vertical positioning of the cone center

  • Angle (0-360°): Starting angle for the conic gradient rotation

  • Banding (0-100%): Create stepped, posterized color transitions

  • Effect Mode: Apply Mirror symmetry or Kaleidoscope patterns

 

Design Applications:

  • Color picker wheels and palettes

  • Loading spinners and progress indicators

  • Abstract geometric patterns

image.png

Diamond Gradients

Unique diamond-shaped color transitions that create striking geometric effects and modern design elements.

 

Available Controls:

  • Move Selected (0-100%): Position individual color stops along diamond edges

  • Center X (0-100%): Horizontal placement of diamond center

  • Center Y (0-100%): Vertical placement of diamond center

  • Scale (10-300%): Resize the diamond pattern

  • Banding (0-100%): Apply posterization for stepped color effects

  • Effect Mode: Mirror and Kaleidoscope transformations available

 

Creative Uses:

  • Modern geometric backgrounds

  • Logo and branding elements

  • Abstract art and pattern design

image.png

Ripple Gradients

Concentric ring effects that simulate water ripples, sound waves, or energy pulses with enhanced banding capabilities.

 

Available Controls:

  • Move Selected (0-100%): Adjust color stop positions within ripple pattern

  • Center X (0-100%): Horizontal positioning of ripple epicenter

  • Center Y (0-100%): Vertical positioning of ripple epicenter

  • Frequency (2-100): Control the number of ripple rings (displayed as 10-500% range)

  • Amplitude (0-200%): Adjust the intensity and spread of ripple distortion

  • Banding (0-100%): Enhanced 1.5x strength for dramatic posterized ripple effects

  • Sharp (0-100%): Transform smooth ripples into sharp, defined rings

  • Effect Mode: Mirror and Kaleidoscope effects for complex patterns

 

Note: Sharp mode is incompatible with Halftone effects

 

Visual Effects:

  • Water ripple simulations

  • Sound wave visualizations

  • Energy pulse animations

image.png

Wave Gradients

Sinusoidal wave patterns perfect for organic, flowing designs with complete amplitude control.

 

Available Controls:

  • Direction (0-360°): Set the wave flow direction in degrees

  • Move Selected (0-100%): Position color stops along wave patterns

  • Frequency (2-100): Control wave density and repetition (displayed as 10-500% range)

  • Amplitude (0-200%): Newly added control for wave height and distortion intensity

  • Banding (0-100%): Enhanced 1.5x strength for dramatic posterized wave effects

  • Sharp (0-100%): Convert smooth waves into sharp, defined patterns

  • Effect Mode: Mirror and Kaleidoscope transformations

 

Note: Sharp mode is incompatible with Halftone effects

 

Design Applications:

  • Organic flowing backgrounds

  • Audio visualization patterns

  • Natural texture simulation

image.png

​Multipoint Gradients

Advanced gradient system with multiple independently positionable color hotspots for complex, organic color blending.

 

Available Controls:

  • Move X/Y (0-100%): Individual X and Y positioning for selected color hotspots

  • Contrast (0-100%): Adjust the contrast between color regions

  • Banding (0-100%): Apply posterization effects with smooth-to-posterized range indicators

  • Spread (0-100%): Push hotspots apart (higher values) or pull them together (lower values)

  • Randomize Positions: One-click button to randomly redistribute all color hotspots

  • Effect Mode: Mirror and Kaleidoscope effects for pattern multiplication

 

Advanced Features:

  • Real-time draggable hotspots in preview

  • Independent X/Y positioning for each color point

  • Organic color blending algorithms

image.png
image.png

​Globe Gradients

Sophisticated 3D sphere rendering with realistic lighting, shadows, and fresnel effects for premium visual appeal.

M

ovement Controls:

  • Move Selected (0-100%): Position color stops on sphere surface

  • Move Gradient X/Y (0-100%): Adjust the gradient pattern position on the sphere

  • Move All X/Y (0-100%): Reposition the entire sphere within the canvas

  • Scale All (10-300%): Resize the entire sphere

 

Lighting System:

  • Move Light X/Y (0-100%): Position the light source for realistic 3D illumination

  • Light Size (1-100%): Control the size and spread of the light source

  • Light Alpha (1-100%): Adjust light intensity and opacity

  • Light Diffuse (1-100%): Control how light spreads across the sphere surface

  • Light Shade Colour: Color picker for customizing light tint

 

Advanced Fresnel Effects:

  • Fresnel Intensity (0-100%): Control edge glow strength

  • Fresnel Spread (0-100%): Enhanced calculation for dramatic edge effects

  • Dark Shade Colour: Color picker for shadow areas

  • Fresnel Banding (0-100%): Apply banding to fresnel edge effects

  • Gradient Banding (0-100%): Posterize the main gradient colors

  • Light Banding (0-100%): Apply banding to lighting calculations

 

Background Controls:

  • Background Colour: Color picker for sphere background

  • Transparency: Checkbox for transparent background export

  • Effect Mode: Mirror and Kaleidoscope transformations

 

Professional Features:

  • Realistic 3D sphere rendering

  • Advanced fresnel calculations for edge lighting

  • Multiple banding options for stylized effects

  • Complete lighting control system

image.png
image.png
image.png
image.png

​Advanced Halftone Effects:

  • Enable/Disable Toggle: Turn halftone effects on or off for any gradient type

  • Pattern Types: Choose from 5 distinct patterns:

    • Dots: Classic circular halftone dots

    • Lines: Linear striped patterns

    • Circles: Hollow circular patterns

    • Squares: Geometric square grid patterns

    • Diamonds: Diamond-shaped pattern grid

  • Size Control (1-50): Adjust the size of individual halftone elements

  • Density Control (10-100): Control spacing between halftone elements (steps of 5)

  • Contrast Enhancement (0-200%): Boost contrast for more dramatic effects (steps of 5)

  • Angle Rotation (0-360°): Rotate halftone pattern orientation (steps of 5)

  • Invert Brightness: Reverse light and dark areas for negative effects

  • Background Options: Choose transparent background or custom color

  • Compatibility Note: Halftone effects are incompatible with Sharp mode on Wave and Ripple gradients

image.png

Animation System:

  • Rotation Animation: Smooth rotation effects for dynamic content

  • Speed Control: Adjustable animation timing

  • Loop Options: Seamless looping for continuous animation

  • Export Integration: Direct animated GIF and MP4 export

 

Export Capabilities:

  • Static Formats: PNG (up to 400px), SVG (vector), JSON (configuration)

  • Animated Formats: GIF and MP4 for gradients with animation

  • Smart Format Filtering: Export modal automatically suggests optimal formats

  • Social Media Presets: Pre-configured sizes for Instagram, Facebook, Twitter, and more

image.png
Screenshot 2025-09-04 at 19.36.02.png

Professional Preset Library:

  • Curated Collection: 48+ professional-grade gradient presets organized by theme

  • Custom Presets: Save and organize your own gradient configurations

  • Thumbnail Previews: Visual representation of each preset

  • One-click Application: Instant preset loading with full customization retention

Screenshot 2025-09-04 at 19.36.22.png

​Custom Preset Management:

  • Save Current Gradient: Transform any gradient configuration into a reusable preset

  • Named Organization: Add custom names to identify your saved presets

  • Persistent Storage: All custom presets automatically save to local browser storage

  • Visual Thumbnails: Each saved preset displays a thumbnail preview for easy identification

  • One-Click Loading: Instantly apply any saved preset to your current project

  • Delete Management: Remove unwanted custom presets with individual delete buttons

  • Separate Library: Custom presets appear in their own dedicated section

  • Full Configuration: Saves all gradient settings including colors, effects, positions, and advanced parameters

​​​

Frontend Architecture

  • React 18 + TypeScript: Modern component-based architecture with full type safety

  • Radix UI + shadcn/ui: Accessible, consistent design system with premium components

  • Tailwind CSS: Utility-first styling with custom theming and dark mode support

  • Wouter: Lightweight client-side routing for smooth navigation

  • Vite Build System: Optimized development and production builds

 

Gradient Engine

  • WebGL-Accelerated Rendering: Custom canvas renderer for real-time gradient generation

  • Advanced Algorithm Library: Comprehensive collection of gradient algorithms including:

    • Basic types (linear, radial, conic)

    • Advanced effects (ripple, wave, diamond, multipoint)

    • 3D transformations (spherical, cylindrical)

    • Visual effects (kaleidoscope, mirror, banding)

  • Optimized Performance: Efficient pixel-level calculations using ImageData manipulation

 

UI/UX Design System

  • Modular Component Library: Consistent API patterns across all components

  • Responsive Design: Mobile-first approach with adaptive layouts

  • Theme System: CSS custom properties with automatic dark/light mode switching

  • Accessibility: WCAG-compliant components with ARIA labels and keyboard navigation

 

Color Management

  • Dynamic Color Stops: Precise control over position, opacity, and color values

  • Smooth Interpolation: Advanced color interpolation between multiple color points

  • Quick Colors: Preset color palettes for rapid prototyping

  • Multiple Export Formats: CSS gradients, PNG images, SVG, and JSON configurations


Core Components
 

​​

Canva Bundle Specifications

  • File Format: Single JavaScript bundle (Spectrum-Supreme-v1.0XXX.js)

  • Bundle Size: Optimized 250-375KB for reliable performance

  • Version Control: Sequential versioning system (v1.0389, v1.0390, etc.)

  • Build Process: Webpack production builds with proper optimization

 

Performance Optimization

  • Bundle Size Validation: Working bundles maintain 250-375KB range

    • Bundles under 200KB indicate incomplete builds

    • Size validation prevents broken deployments

  • Memory Management: Efficient canvas rendering with proper cleanup

  • Real-time Updates: Optimized state management for smooth interactions

 

Integration Workflow

  1. Development: Local React development environment with hot reloading

  2. Build Process: Webpack production build with minification

  3. Bundle Creation: Single-file JavaScript bundle generation

  4. Canva Deployment: Direct bundle upload to Canva app system

  5. Testing: Comprehensive testing within Canva environment

 

Architectural Patterns

  • State Management: Custom React hooks with real-time updates

  • Component Communication: Prop drilling with optimized render cycles

  • Error Handling: Graceful degradation with user-friendly error messages

  • Cross-browser Compatibility: Tested across modern browsers and devices

​


Technical Integration
 

​​

Optimal Workflow

  1. Start with Presets: Use the preset library for quick starting points

  2. Incremental Adjustments: Make small changes and observe real-time updates

  3. Layer Complexity: Begin with basic gradients, then add advanced effects

  4. Save Frequently: Use custom preset saving for complex configurations

  5. Test Export Formats: Preview different export formats before final selection

 

Performance Tips

  • Gradient Complexity: Balance visual quality with performance needs

  • Animation Considerations: Limit animation frames for web-optimized exports

  • Color Stop Management: Use minimum necessary color stops for smooth performance

  • Preview Efficiency: Use the real-time preview for immediate feedback

 

Design Recommendations

  • Color Harmony: Utilize color theory principles for professional results

  • Contrast Awareness: Ensure sufficient contrast for accessibility

  • Format Selection: Choose appropriate export formats for intended use

  • Resolution Planning: Consider final output size when designing gradients

 

Advanced Techniques

  • Globe Lighting: Experiment with light positioning for realistic 3D effects

  • Wave Patterns: Combine frequency and amplitude for complex wave designs

  • Banding Effects: Use enhanced banding for stylized, posterized looks

  • Animation Timing: Optimize frame rates for smooth motion graphics

​


Best Practices
 

Performance Issues

  • Symptom: Slow rendering or unresponsive interface

  • Cause: Complex gradients with too many color stops

  • Solution: Reduce color stops, simplify gradient complexity

Export Problems

  • Symptom: Export fails or produces unexpected results

  • Cause: Format mismatch or resolution limits

  • Solution: Check format compatibility, reduce resolution if needed

Hotspot Interaction

  • Symptom: Cannot drag color stop hotspots

  • Cause: Precision clicking required or gradient type limitations

  • Solution: Click directly on hotspot center, verify gradient mode. OR use the 'move selected' slider if that is easier

Technical Support

  • Version Verification: Always use latest bundle version (v1.0396+)

  • Browser Compatibility: Ensure modern browser with WebGL support, recomend using Chrome or the Canva app

  • Canvas Rendering: Verify browser canvas and WebGL functionality

  • Memory Management: Refresh application if performance degrades

Advanced Troubleshooting

  • State Persistence: Custom presets saved in browser localStorage

  • Error Recovery: Refresh application to reset state if needed

  • Format Validation: Use smart export modal for format recommendations

  • Performance Monitoring: Monitor browser console for error messages​

Support Resources

  • In-app Help: Contextual tooltips and guidance throughout the interface

  • Community Support: Access to user community and design resources

  • Documentation: Comprehensive guides for advanced features

  • Update Notifications: Automatic alerts for new features and improvements​

 

Please report bugs to: simon.spencer.harvey@gmail.com subject: Spectrum Supreme Bug

Please share feature request to: simon.spencer.harvey@gmail.com subject: Spectrum Supreme Idea

​


Troubleshooting and Support
 

v1.0396 (Latest) - Enhanced Effects & Controls

  • Enhanced Banding: 1.5x stronger banding effects for Wave and Ripple gradients

  • Wave Amplitude: Added missing Amplitude slider to Wave gradient controls

  • Globe Controls: Fixed Move Gradient X/Y vs Move All X/Y behavior swap

  • Preset Thumbnails: Fixed delete button positioning within frame boundaries

  • Technical: Improved gradient algorithm performance and reliability

v1.0395 - Control Fixes & UI Polish

  • Globe Movement: Corrected swapped Move Gradient and Move All control behaviors

  • Thumbnail Layout: Contained delete buttons within preset thumbnail frames

  • UI Refinement: Enhanced spacing and visual consistency across components

v1.0394 - Fresnel Enhancement

  • Fresnel Spread: Restored stronger Fresnel Spread calculation for dramatic edge effects

  • Algorithm Update: Improved fresnel power formula for better visual impact

  • Performance: Optimized sphere rendering with enhanced lighting calculations

v1.0393 - Thumbnail Rendering Fix

  • Background Sizing: Fixed saved preset thumbnail cropping issues

  • CSS Enhancement: Added proper background-size, position, and repeat properties

  • Visual Consistency: Ensured complete gradient rendering in all thumbnail containers

v1.0392 - Layout Standardization

  • Thumbnail Sizing: Matched saved preset dimensions to library preset specifications

  • Grid Consistency: Standardized spacing and dimensions across preset sections

  • Professional Polish: Achieved uniform visual weight throughout preset library

v1.0391 - Globe Control Reordering

  • Control Organization: Reordered Globe controls for optimal workflow

  • Intuitive Layout: Dark Shade Colour → Fresnel Banding → Gradient Banding → Light Banding

  • User Experience: Improved logical flow of gradient creation process

v1.0390 - Globe Functionality Restoration

  • Move Gradient Controls: Fixed Globe sphere positioning with Move Gradient X/Y sliders

  • Algorithm Update: Enabled proper sphere center positioning in Globe gradients

  • Movement Clarity: Distinguished between sphere positioning and gradient pattern movement

v1.0389 - Major Feature Release

  • Export System: Comprehensive export modal with format filtering and social media presets

  • Preset Management: Enhanced thumbnail sizing and scroll area optimization

  • Linear Rotation: Fixed rotation bugs affecting Diamond, Globe, and Ripple gradients

  • Space Efficiency: Improved layout with fixed preview area and scrollable controls


Version History​
 

bottom of page