Credits

Description

The Credits component is an organism-level component designed to mimic the look and feel of movie credits. It features a sticky logo at the top and scrollable content below. The component is versatile, allowing for the inclusion of various content types through its content field, which can include definition items or other compatible components.

Installation

bash

sabaccui add credits

Usage

Here's an example of how to use the Credits component in a Storyblok block:

Preview

Director: John Doe
Peter Smith

Producer: Jane Smith

Schema

Field	Type	Description	Default
`logo`	`asset`	An image asset for the logo displayed at the top of the credits. Only images are allowed.	`null`
`content`	`bloks`	An array of content blocks to be displayed in the scrolling credits section. Restricted to components with specific tags.	`[]`

DefinitionItem

Notes

The Credits component uses a sticky positioning technique to keep the logo visible at the top while scrolling through the content.
The component includes a gradient overlay at the bottom to create a fade-out effect for the scrolling content.
The useProcessedBloks composable is used to process the content blocks, suggesting additional manipulation or formatting of the content data.

Best Practices:

Ensure that the logo image is of appropriate size and contrast to be visible when inverted and scaled.
When adding content blocks, consider the overall length and readability of the credits section.
Use consistent formatting and structure in the content blocks to maintain a cohesive look throughout the credits.