Skip to content

Three-dimensional generative scalar design system component visualisation tool

Notifications You must be signed in to change notification settings

hturan/three-stacks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

run example with yarn && yarn start, or just visit https://hturan.com/three-stacks

move mouse / tilt device to alter perspective offset, mouse wheel to alter perspective depth

<ThreeStacks /> expects four props —

  • x — an array of values to render across the x-axis
  • y — an array of values to render across the y-axis
  • z — an array of values to render across the z-axis
  • render — a render function that takes x, y, and z values and returns a component

like so —

<ThreeStacks
  x={borderWidths}
  y={borderStyles}
  z={colors}
  render={(x, y, z) => (
    <Button
      style={{
        borderStyle: y,
        borderWidth: x,
        borderColor: z,
        color: z
      }}
    />
  )}
/>

About

Three-dimensional generative scalar design system component visualisation tool

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published