Monument UI

About

Monument UI is a JavaScript library which will help you add 3D element and text effect to existing components or to create new ones.

Demo

See plugin in action

How to Install

First, install the library in your project by npm:

$ npm install monument-ui

Or Yarn:

$ yarn add monument-ui

Getting Started

• Connect libary with project using ES6 import:

import { Element, Text } from 'monument-ui';

• Later create component and pass options:

<Element
  as={ /* component or DOM element */ }
  color={ /* color value */ }
  shadow={ /* shadow value */ }
  colorify={ /* true / false */ }
  perspective={ /* x, y */ }
  clickable={ /* 'push' / 'pull' */ }
  hoverable={ /* 'pull' / 'push' */ }
  touchable={ /* 'push' / 'pull' */ }
/>

<Text
  as={ /* component or DOM element */ }
  color={ /* color value */ }
  shadow={ /* shadow value */ }
  colorify={ /* true / false */ }
  perspective={ /* x, y */ }
/>

Props

Element component

Name | Type | Default | Description | Available options -|-|-|-|- color | string | | Color of depth effect | Color value in hex, rgb(a) etc. shadow | string | | Shadow added to element | e.g.: 10px 10px 20px #222a colorify | boolean | false | Change color for each layer | Enable true / disable false perspective | object | { x: 5, y: 5 } | Horizontal and vertical depth length | Object with x and y values clickable | string | undefined | Action for element on click (only desktop) | push (move down), pull (move up) hoverable | string | undefined | Action for element on hover (only desktop) | pull (move up), push (move down) touchable | string | undefined | Action for element on touch (only mobile) | push (move down), pull (move up)

Text component

Name | Type | Default | Description | Available options -|-|-|-|- color | string | | Color of depth effect | Color value in hex, rgb(a) etc. shadow | string | | Shadow added to text | e.g.: 10px 10px 20px #222a colorify | boolean | false | Change color for each layer | Enable true / disable false perspective | object | { x: 5, y: 5 } | Horizontal and vertical depth length | Object with x and y values

Example

export default function App() {
  // state, effects, etc.

  return (
    <Element
      as="button"
      clickable="push"
      color="#f00"
      perspective={{ x: 10, y: '-5em' }}
      style={{ /* style */ }}
    >
      <Text
        as="h2"
        color="#f00"
        colorify
        perspective={{ x: -4, y: 6 }}
      >
        Hello World!
      </Text>
    </Element>
  );
}

License

This project is licensed under the MIT License © 2018-present Jakub Biesiada