Crypto-Jaguars/Revo-Marketplace

Create 3D Effects for Hexagons

Open

#128 opened on Sep 26, 2025

View on GitHub
 (4 comments) (0 reactions) (1 assignee)TypeScript (71 forks)auto 404
Frontendeasygood first issueonlydust-wave

Repository metrics

Stars
 (5 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Task Description Implement advanced 3D effects for hexagons with shadows, highlights, and depth.

Deliverable 3D effects system that makes hexagons look like physical buttons with relief.

Requirements

  • Realistic base shadows
  • Top highlights for button effect
  • Multiple beveled edges
  • Side lighting effects
  • Smooth hover transitions

Technical Requirements

  • Multiple box-shadows for depth
  • Gradients to simulate lighting
  • 3D transforms with perspective
  • Smooth CSS transitions
  • Differentiated hover and active states

Content Updates Required

  • Shadows: base, medium, and deep
  • Highlights: top and left for lighting
  • Gradients: simulating curved surfaces
  • Transforms: rotateX, rotateY, scale

Additional Notes

  • Subtle but visible effects
  • Optimized performance
  • Consistency across all hexagons

Definition of Done

  • Hexagons have realistic 3D appearance
  • Smooth and natural hover effects
  • Correct shadows and highlights
  • Transitions work well
  • Optimized performance

Contributor guide

Research direction
Study CSS box shadow, gradients, 3D transforms, and transitions. Combine multiple box shadows for depth, use linear gradients for highlights and shadows, apply rotateX/rotateY for 3D perspective, and add hover/active states with smooth transitions.
Tech stack
None
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70