Truncate content with fade out effect
What you'll build
An article that shows only its first two paragraphs and fades out. The Edge Worker removes the rest before the HTML reaches the reader.
1. Prerequisites
- You will need a Component Workflow in a Surface
2. Add a component
const : = async ({ }) => {
return {
: {
: [
{
: "html",
: `
<style>
#article {
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
</style>
`,
},
],
: {
: "p:nth-child(2)",
},
},
};
};
export default ;Result
You will only see the first two paragraphs of your article.