Project

This is like a card content component, used to display a content item, for example an article, post or project. It uses the <Frame /> component as a wrapper and the <Words /> for the header title animation.

<Project animate header='Arwes'>
    Futuristic Sci-Fi and Cyberpunk Graphical
    User Interface Framework for Web Apps
</Project>

The theme is the primary and the title has the header theme, this is not configurable.

Prop nameTypeDefaultDescription
AnimationanyAnimationComponent
FrameanyFrameComponent
WordsanyWordsComponent
HeadinganyHeadingComponent
themeanyRequired
classesanyRequired
animatebool
showbooltrue
animationobject
soundsobject{}

It uses the click player.

nodestring'article'

The HTML tag element to use.

headerstringRequired

The HTML header used for the title.

headerSizeenum'h2'

The actual font size to use for the HTML header.

One of: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
iconany<i className='mdi mdi-package' />

The icon to decorate the project.

childrenany

If function, receives the animation status object.

Source code: src/Project Open in: Playground